Shopify themes, liquid, logos, and UX
I have been trying to figure out how to change my mobile layout on theme "Narrative". When I edit the site, it says 3 products per row are selected, which it does show on desktop, however only 1 product per row shows on mobile. How do i change this and make it 2-3 products per row ON MOBILE!!?
again I am using theme narrative
Hi @laviedecouture,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
.collection-template .card-list__column{
display: flex;
flex-wrap: wrap;
padding-left: 0px !important;
}
.collection-template .card-list__column .card{
width: 50% !important;
padding-left: 20px !important;
}
}
Hope it helps!
Hi,
I tested it on Narrative theme and it works fine. https://i.imgur.com/2WWrj6m.png
What's your site? I will check it.
Hi @laviedecouture,
I checked and couldn't find the code you added. https://i.imgur.com/P54x5yA.png
If you add it correctly, it will show like this: https://i.imgur.com/HVBpQeX.png
Hope it is clear to you.
Hi @laviedecouture,
Yes. Narrative theme currently supports scss, not css. But it won't affect your store, if you want to use CSS theme you can find Shopify 2.0 store.
And my code tutorial, you just need to add it at the bottom of the file, it will work fine what you want.
Hope it is clear to you.
Hi @laviedecouture,
If you can't add code at theme.scss.liquid file, you can go to layout/theme.liquid file. Find 'content_for_header' and add code here: https://i.imgur.com/HJge4yB.png => https://i.imgur.com/KvbL1iF.png
Code:
<style>
@media only screen and (max-width: 749px){
.collection-template .card-list__column{
display: flex;
flex-wrap: wrap;
padding-left: 0px !important;
}
.collection-template .card-list__column .card{
width: 50% !important;
padding-left: 20px !important;
}
}
</style>
Hope it helps!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024