Can I modify the mobile layout for product rows in the Narrative theme on Shopify?

laviedecouture
New Member
5 0 0

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

Replies 9 (9)

LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
laviedecouture
New Member
5 0 0
Did not work! infact it took all of my products away!
LitCommerce
Astronaut
2860 684 732

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
laviedecouture
New Member
5 0 0
https://www.laviedecouture.com

In theme.scss.liquid there is 9,205 lines

LitCommerce
Astronaut
2860 684 732

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
laviedecouture
New Member
5 0 0
It is saying "
SCSS support is deprecated in themes

Convert .scss and .scss.liquid files to .css or .css.liquid for a better
performing online store and theme editor"


.scss is apparently not supported in my theme anymore
LitCommerce
Astronaut
2860 684 732

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
laviedecouture
New Member
5 0 0
It says it is only supporting .css and I did put it at the bottom of the 9,000 lines on .scss and it messed up the home page on the computer.


LitCommerce
Astronaut
2860 684 732

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!

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!