Make 3 columns adjust to 1 column on mobile

[Maureen]

On this test site I laid out the page with 3 columns (left is text, middle and right are images) using this code:

<div>

<div class=”col-left”>

<p style=”text-align: center;”><span style=”color: #000000;”><span style=”font-family: arial, helvetica, sans-serif; font-size: 12pt;”>I ABBREVIATED THE TEXT BECAUSE IT IS TOO LONG

</div>

<div class=”col-middle”><a href=”http://sgdtestsite.com/kitchen”><img src=”http://sgdtestsite.com/wp-content/uploads/2016/06/bedroom-base.jpg”onmouseover=”this.src=’http://sgdtestsite.com/wp-content/uploads/2016/06/bedroom-rollover.jpg'”onmouseout=”this.src=’http://sgdtestsite.com/wp-content/uploads/2016/06/bedroom-base.jpg'”/></a></div&gt;

<div class=”col-right”><a href=”http://sgdtestsite.com/kitchen”><img src=”http://sgdtestsite.com/wp-content/uploads/2016/06/Kitchen-base.jpg”onmouseover=”this.src=’http://sgdtestsite.com/wp-content/uploads/2016/06/kitchen-rollover.jpg'”onmouseout=”this.src=’http://sgdtestsite.com/wp-content/uploads/2016/06/Kitchen-base.jpg'”/></a></div&gt;

Then in custom CSS I added this:

/*Change col widths for Portfolio page*/

.col-left {float: left; width: 48%;margin-right:2%; margin-bottom:2%;padding:2px; padding-right:40px;} /*sets the width for the left column*/

.col-middle {float: left; width: 20%;margin-right:2%; margin-bottom:2%;padding:2px;} /*sets the width for the middle column*/

.col-right {float: left; width: 20%;margin-right:2%; margin-bottom:2%;padding:2px;} /*sets the width for the right column*/

.col-right {margin-right:0px;} /*removes the right margin on the last one*/

/*Make 3 column Portfolio page 1 col on mobile*/

.is-mobile .content-3-col {width:100%;margin-top:20px;}

I would like the page to switch to a single column in mobile.. Right now they are adjusting to 2 columns.

I have been working on this challenging page for a few hours, and would be very happy for the help! tX!

Here is the site:  http://sgdtestsite.com/1-code    

[scrambler]

A few things.
You need to set all the classes to box-sizing:border box so the padding is included in the width, and you can set the with and margin % to make a total of 100%.
So after addition and simplification, your rules need to be.

/*Change col widths for Portfolio page*/

.col-left, .col-middle, .col-right {float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.col-left {width: 50%;margin-right:2%; margin-bottom:2%;padding:2px; padding-right:40px;} /*sets the width for the left column*/

.col-middle {width: 23%;margin-right:2%; margin-bottom:2%;padding:2px;} /*sets the width for the middle column*/

.col-right {width: 23%;margin-bottom:2%;padding:2px;} /*sets the width for the right column*/

Then to change their width on mobile, You used a rule that is based on the class content-3-col, but that class is nt used, so that rule is useless.
What you want is

If you want one text column with two image columns below it, use
.is-mobile .col-left {width:100%;margin-right:0;}
.is-mobile .col-middle, .is-mobile .col-right {width:49%;}

or if you want a single column for all, use
.is-mobile .col-left, .is-mobile .col-middle, .is-mobile .col-right {width:100%;margin-right:0;}

[Maureen]

A million thanks!!!!  

[scrambler]

I think it would look better using the first solution with the two images side by side under the text on mobile. Right now it created a weird empty space right of the image.

if you want you can make that for small tablet, and use 1 column for phones, just change the is-mobile class by is-smalltablet in the first set of mobile rules, and by is-phone in the last one

[Maureen]

You’re right, there is a space to the right on my iPhone. I changed to the first solution with the images side by side and it works when I scale down my desktop window, but will not display side by side on my phone.

[scrambler]

Right now I am still seeing the last rule for a single column on mobile so may be a cache problem.

Also make sure your images are responsive and can scale

[Maureen]

It was a caching issue. Turned off Zen cache and I now have the images side by side on my phone. It looks great!
Thanks again. 

[Author]

Posts