Displaying 2 Clients per row on mobile

Hello Sydney Support,

First of all, thank you again for developing such a wonderful, and free, program for us to use! My question today is in regard to how my clients are displayed in mobile view. On the computer and tablet view, I have them listed as I would like for them to look (4 per row). When I click over to mobile view, they became overlapped on one another.

I searched for solutions to this and found the following CSS to stack them vertically:

@media only screen and (max-width: 780px) {
    .roll-client .client-item {
        display: block;
        width: 100%;
        margin-bottom: 0px;
    }
}

I inserted this on our site: (www.asset-usa.org) and everything works well - they are stacked and no longer overlap on mobile view. My question is, is there a way to keep them stacked, but have 2 clients per row in mobile view? Would this be adding CSS to what is already used above, or do I need to replace the above CSS with new code? Thank you in advance!

Brian

Hello Brian,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 1024px) {
  .roll-client .client-item img {
    max-width: 100% !important;
  } 
}

@media only screen and (max-width: 780px) {
  .roll-client .client-item {
    display: inline-block;
  }
}

Regards,
Kharis

Kharis,

Your suggested code did not arrange the clients to 2 per row, but formatted it to look like it does when viewed on a computer screen (4 per row). This looks better than to have them all stacked one on top of another, so I am happy with how it now looks. Thanks for your help.

Brian

Sorry for misunderstanding. Try adding the below extra CSS code:

@media only screen and (max-width: 800px) {
  .widget_sydney_clients .roll-client .client-item {
    width: 49.5%;
  }
}

Regards,
Kharis

Still no luck with the newly suggested code, but again, I am happy with how it now looks with the previously suggested code. Thanks.

Probably your tablet’s screen width is larger that 800px as specific in the media query. Try changing it to 991 or 1024.

So it would look like this:

    @media only screen and (max-width: 1024px) {
      .widget_sydney_clients .roll-client .client-item {
        width: 49.5% !important;
      }
    }

and add !important argument to set highest priority code execution.

Regards,
Kharis