How can I modify the mobile layout for 2-3 products per row on Narrative theme?

Store Design
1

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

2

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!

3

Did not work! infact it took all of my products away!

4

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.

5

https://www.laviedecouture.com

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

6

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.

7

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

8

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.

9

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.

10

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:

Hope it helps!