[mizumarketing]

Hi Juan,

I would like to setup responsive columns in my page. I saw what you said about adding this CSS code for the columns:

.col-1{
width: 50%;
float: left;
overflow: hidden;
}

.col-2 {
width: 46%;
float: right;
overflow: hidden;
}

I would like the second column to fall underneath the first one when it is on a mobile device instead of just making them smaller. Is this an option?

Thanks!

[Juanfra Aldasoro]

Hello There,

Yes, you can add some code to make that columns full width on mobile devices. For example:

/* iPhone Landscape */
@media screen and (max-width: 480px) {

.col-1, .col-2 {
width: 100%;
float: none;
display: block;
}

}

With that code, all devices that are smaller than 480px width (i.e.: iPhone Landscape) will ahve those two columns one on top of the other.

Best,
Juan.

[mizumarketing]

Awesome it worked perfectly. Thanks!

[mizumarketing]

I am having issues with the images displaying correctly. Can I e-mail you a link to check it out?

Thanks!

[Juanfra Aldasoro]

Sure, drop us a line 🙂

support@nicethemes.com

Best,
Juan.