A user is experiencing a logo list display issue where logos appear correctly on desktop but overlap and look poor on mobile devices.
Problem:
Desired outcome:
Solution provided:
PageFly-Victor offered a CSS-based fix with step-by-step instructions:
The CSS code targets screens with max-width 767px and adjusts the logo bar styling to prevent wrapping and hide the last child element. The solution includes a screenshot showing the expected result.
Status: Solution proposed but not yet confirmed as implemented or tested by the original poster.
the logo list looks good for pc:
but for mobile, it overlaps and dosen’t look very good:
I want to keep it as it is for pc, but change it on mobile, so it’s three images side by side, similar to this
TLDR: logolist stay the same for pc, on mobile change to 3 logos side by side
store link: https://8c2dd1-3.myshopify.com/
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.css.
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width: 767px){
.logo-bar__item:last-child {
display: none;
}
.logo-bar {
margin-bottom: 0 !important;
flex-wrap: nowrap !important;
}
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
