How to avoid columns to stagger on mobiles

[juanpbm]

Hi

I have a client list that looks nice on any desktop. But when we see it on a mobile phone (or trigger mobile view in pro) the client list looks staggered. Is there a way to avoid this and just let it shrink? Where are the responsive controls? Do you guys have documentation on custom CSS?

Site in question ipcdigitalmedia.com

Thanks

[paul.r]

Hi,

To prevent it from stacking, you can add a unique class to your row element.

Then add this in Theme Options > CSS

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

 .stay-inline .x-sm x-1-5:last-of-type {
    margin-right: 0;
  }
}

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Hope that helps.

[juanpbm]

Hi Paul

Thank you very much for your response. Unfortunately, it isn’t working. All the logos are still stacking up. I would like to leave the grid as is and just shrink it.

When you say “Theme Options” / “CSS” you mean the small icon above JS? GLOBAL CSS?

Thanks again.

[nabeel]

Hi again,

I see you’ve added stay class instead of stay-inline, you can now replace the previous code with the following code:

@media screen and (max-width: 767px){
  .stay .x-sm.x-1-5 {
    width: 16.8%;
    float: left;
    margin-right: 4%;
  }

 .stay .x-sm.x-1-5:last-of-type {
    margin-right: 0;
  }
}

Yes that’s right regarding Theme Options > CSS (see screenshot)

Cheers!

[juanpbm]

Excellent! Thank you.

[ruenel]

You are most welcome!