Mobile view and image stacking

Support
#1

Hi there, see this site:

I have a row of 6 columns, how do I make it stack (on a mobile) 2, 2, 2? at the moment it stacks 1,1,1,1,1,1.

Thanks.

#2

Hi There,

Thank you for writing in, please add this to Theme Options > CSS

@media(max-width: 767px){
  .stay-inline .x-column.x-1-6 {
    width: 48%;
    float: left;
    margin-right: 4%;
  }

 .stay-inline .x-column.x-1-6:nth-child(2n),
 .stay-inline .x-column.x-1-6:last-of-type {
    margin-right: 0;
  }
}

Then apply the CLASS stay-inline to your Content band (where the 1/6 columns are).



You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

#3

Perfect, thanks!

#4

You are most welcome. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.