A Shopify store owner wants to display 3 logos per row instead of 2 on mobile devices in their logo section (located below Daily Deals on the homepage). The layout works correctly on desktop and tablets but needs adjustment for mobile.
Solution provided:
@media screen and (max-width: 749px) {
.gridblock.row.mobile-1 {
width: 30.25%;
}
}
The solution adjusts the width of logo elements specifically for mobile screens to accommodate 3 logos per row instead of the default 2.
In my ClothingStore Soulsideshop.com the LogoList is displayed on Mobile with only 2 Logos in a Row.
The section is the logo-section and i need a custom liquid to display it properly. When you scroll down on the Page below the Daily Deals you find the Logo Section im talking off.
I would like to have always 3 Logos instead of two (on Mobile). On Desktops and Tablets and bigger Phone it works well. And it should please look like this
Thanks so much.
Best regards Constantin
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (max-width: 401px){
.gridlock .row .mobile-1 {
width: 30.25%;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
