Post by Boppe » Fri May 25, 2018 2:36 pm

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!

Attachments

PC Desktop.jpg

PC Desktop.jpg (64.91 KiB) Viewed 532 times

Last edited by Boppe on Mon May 28, 2018 6:24 pm, edited 1 time in total.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by DigitCart » Fri May 25, 2018 3:14 pm

Hi,
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>
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:

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/

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by Boppe » Fri May 25, 2018 10:20 pm

DigitCart wrote:
Fri May 25, 2018 3:14 pm
Hi,
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>
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:

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.

This part:
<div class="clearfix">
<div class="test">test</div>
<div class="test">test</div>
</div>.... etc....

Which file am I supposed to edit?

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by DigitCart » Fri May 25, 2018 10:31 pm

Default theme is built with Bootstrap.

Are you using HTML module to display those images? Can you share a link to your site?

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by Boppe » Fri May 25, 2018 10:49 pm

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>

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by DigitCart » Fri May 25, 2018 10:56 pm

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>

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by DigitCart » Fri May 25, 2018 10:57 pm

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>

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by Boppe » Mon May 28, 2018 6:23 pm

Thank you very much, DigitCart.
It worked very fine.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by DigitCart » Mon May 28, 2018 8:27 pm

You're welcome!

My Extensions


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm

Who is online

Users browsing this forum: No registered users and 63 guests