on the homepage it looks good, but on the collection-list its bugged on mobile. any help appreciated!
Topic summary
A user is experiencing layout issues with their collection list page on mobile devices. While the homepage displays correctly, the collection page at layalinoor.com/collections shows broken formatting on mobile view, as shown in attached screenshots.
Proposed Solution:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
- Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add the following CSS code at the bottom:
@media screen and (max-width: 767px) {
.collection-list {
grid-column: 1 !important;
}
}
This CSS targets mobile screens (767px and below) and forces the collection list to display in a single column, which should resolve the layout bug. The fix uses a media query to apply styling specifically to mobile viewports.
1 Like
Hi @Jehad1
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: 767px){
.collection-list {
grid-column: 1 !important;
}
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!