OC 2.3.0.2
I've attached an image to explain what I want.
On my homepage there are 4 images. When viewing the site on a desktop I want the images displayed 2 and 2 (2 rows).
Om a mobile I want the images displayed 1 and 1 and 1 and 1 (4 rows).
Is there a way to set image size to 50% for desktop and 100% for mobile?
Thanks!
Hi,
If your theme is built with Bootstrap, you can do with this HTML markup:
Here is a demo:
https://jsfiddle.net/vbjq2Lke/
Read more about Grid system:
https://getbootstrap.com/docs/4.0/layout/grid/
If your theme is not built with Bootstrap, you can do it manually.
Html:
Css:
Demo:
https://jsfiddle.net/jnage9Lz/
If your theme is built with Bootstrap, you can do with this HTML markup:
Code: Select all
<div class="row">
<div class="col-sm-6 col-xs-12">test</div>
<div class="col-sm-6 col-xs-12">test</div>
</div>
https://jsfiddle.net/vbjq2Lke/
Read more about Grid system:
https://getbootstrap.com/docs/4.0/layout/grid/
If your theme is not built with Bootstrap, you can do it manually.
Html:
Code: Select all
<div class="clearfix">
<div class="test">test</div>
<div class="test">test</div>
</div>
Css:
Code: Select all
.clearfix::after {
content: "";
clear: both;
display: table;
}
.test {
float: left;
width: 50%;
}
@media screen and (max-width: 768px){
.test {
float: none;
width: auto;
}
}
Demo:
https://jsfiddle.net/jnage9Lz/
I'm using OC 2.3.0.2 default theme so I guess there is no Bootstrap.DigitCart wrote: ↑Fri May 25, 2018 3:14 pmHi,
If your theme is built with Bootstrap, you can do with this HTML markup:Here is a demo:Code: Select all
<div class="row"> <div class="col-sm-6 col-xs-12">test</div> <div class="col-sm-6 col-xs-12">test</div> </div>
https://jsfiddle.net/vbjq2Lke/
Read more about Grid system:
https://getbootstrap.com/docs/4.0/layout/grid/
If your theme is not built with Bootstrap, you can do it manually.
Html:Code: Select all
<div class="clearfix"> <div class="test">test</div> <div class="test">test</div> </div>
Css:Code: Select all
.clearfix::after { content: ""; clear: both; display: table; } .test { float: left; width: 50%; } @media screen and (max-width: 768px){ .test { float: none; width: auto; } }
Demo:
https://jsfiddle.net/jnage9Lz/
This part:
<div class="clearfix">
<div class="test">test</div>
<div class="test">test</div>
</div>.... etc....
Which file am I supposed to edit?
Default theme is built with Bootstrap.
Are you using HTML module to display those images? Can you share a link to your site?
Are you using HTML module to display those images? Can you share a link to your site?
OK, I use bootstrap.
Yes, it's a HTML module.
The HTML module looks like below. Where should I insert the code?
<div class="row">
<div class="col-sm-6 col-xs-12">test</div>
<div class="col-sm-6 col-xs-12">test</div>
</div>
HTML module:
<p style="text-align: center;"><a href="category1" target="_self"><img alt="Name of image1" src="https://www.sitename.com/image/catalog/ ... image1.jpg" style="width: 100%;" /></a><br />
<strong><a href="category1" target="_self">category1text</a>.</strong> More text</p>
<p style="text-align: center;"><a href="category2" target="_self"><img alt="Name of image2" src="https://www.sitename.com/image/catalog/ ... image2.jpg" style="width: 100%;" /></a><br />
<strong><a href="category2" target="_self">category2text</a>.</strong> More text</p>
<p style="text-align: center;"><a href="category3" target="_self"><img alt="Name of image3" src="https://www.sitename.com/image/catalog/ ... image3.jpg" style="width: 100%;" /></a><br />
<strong><a href="category3" target="_self">category3text</a>.</strong> More text</p>
<p style="text-align: center;"><a href="category4" target="_self"><img alt="Name of image4" src="https://www.sitename.com/image/catalog/ ... image4.jpg" style="width: 100%;" /></a><br />
<strong><a href="category4" target="_self">category4text</a>.</strong> More text</p>
Yes, it's a HTML module.
The HTML module looks like below. Where should I insert the code?
<div class="row">
<div class="col-sm-6 col-xs-12">test</div>
<div class="col-sm-6 col-xs-12">test</div>
</div>
HTML module:
<p style="text-align: center;"><a href="category1" target="_self"><img alt="Name of image1" src="https://www.sitename.com/image/catalog/ ... image1.jpg" style="width: 100%;" /></a><br />
<strong><a href="category1" target="_self">category1text</a>.</strong> More text</p>
<p style="text-align: center;"><a href="category2" target="_self"><img alt="Name of image2" src="https://www.sitename.com/image/catalog/ ... image2.jpg" style="width: 100%;" /></a><br />
<strong><a href="category2" target="_self">category2text</a>.</strong> More text</p>
<p style="text-align: center;"><a href="category3" target="_self"><img alt="Name of image3" src="https://www.sitename.com/image/catalog/ ... image3.jpg" style="width: 100%;" /></a><br />
<strong><a href="category3" target="_self">category3text</a>.</strong> More text</p>
<p style="text-align: center;"><a href="category4" target="_self"><img alt="Name of image4" src="https://www.sitename.com/image/catalog/ ... image4.jpg" style="width: 100%;" /></a><br />
<strong><a href="category4" target="_self">category4text</a>.</strong> More text</p>
Try this:
Code: Select all
<div class="row">
<div class="col-sm-6 col-xs-12">
<p style="text-align: center;"><a href="category1" target="_self"><img alt="Name of image1" src="https://www.sitename.com/image/catalog/ ... image1.jpg" style="width: 100%;" /></a><br />
<strong><a href="category1" target="_self">category1text</a>.</strong> More text</p>
</div>
<div class="col-sm-6 col-xs-12">
<p style="text-align: center;"><a href="category2" target="_self"><img alt="Name of image2" src="https://www.sitename.com/image/catalog/ ... image2.jpg" style="width: 100%;" /></a><br />
<strong><a href="category2" target="_self">category2text</a>.</strong> More text</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<p style="text-align: center;"><a href="category1" target="_self"><img alt="Name of image1" src="https://www.sitename.com/image/catalog/ ... image1.jpg" style="width: 100%;" /></a><br />
<strong><a href="category1" target="_self">category1text</a>.</strong> More text</p>
</div>
<div class="col-sm-6 col-xs-12">
<p style="text-align: center;"><a href="category2" target="_self"><img alt="Name of image2" src="https://www.sitename.com/image/catalog/ ... image2.jpg" style="width: 100%;" /></a><br />
<strong><a href="category2" target="_self">category2text</a>.</strong> More text</p>
</div>
</div>
Simple example:
Code: Select all
<div class="row">
<div class="col-sm-6 col-xs-12"><p style="text-align: center;">More text</p></div>
<div class="col-sm-6 col-xs-12"><p style="text-align: center;">More text</p></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12"><p style="text-align: center;">More text</p></div>
<div class="col-sm-6 col-xs-12"><p style="text-align: center;">More text</p></div>
</div>
Who is online
Users browsing this forum: Amazon [Bot] and 68 guests