Hi, I’m using the narrative theme and I’m running into a problem on the collection page. I want to have a grid layout on both desktop and MOBILE. But on mobile, it’s showing up as a collage (see screenshot).
I already tried inserting this code to assets/theme.scss.liquid file, but it doesn’t work. Any help is appreciated!! Thank you!!
@media only screen and (max-width:749px) {
.card__name-v1 {max-width: 100px; height: 85px;}
}
Hi, @joyce11
I checked your site,
I find it perfect no problem.
Thank You!
Hello Dear @joyce11 ,
Can you give me your Web Access so i think your problem will be solved.
Thank you for your reply! I actually added this code to the bottom of assets/theme.scss.liquid file and now the layout is in Grid. But, now the card name is not centered and there’s a big gap between the name and the price. Is there an additional code to fix this? 
Paste yhis code in top of theme.scss file.
@media only screen and (max-width:749px) {
.card__price {
margin-top: -35px !important;
}
}
Thank You!
Thank you!! The price looks good! However, the names are still not centered Is there an additional code to center this?
okk let me check!
Thank you so much for taking the time 
If possible, I just want the price to flow right underneath where the name title ends, and keep the grid layout. I could remove my code if that makes it easier!
Paste this code in theme.scss file.
@media only screen and (max-width: 749px)
.card__name {
max-width: 150px !important;
}
If it will work so accept my solution and like please.
Thank You!
Thank you so much!! I changed the original code I added to max-width 150px and it worked!!
Is there a code to move the pricing right underneath where the name title ends? Instead of having them all at margin-top: -35px ?
okk I will fix it!
@Zworthkey Thank you so much! FYI, I removed the following code at the top of theme.scss.liquid file.
@media only screen and (max-width:749px) {
.card__price {
margin-top: -35px !important;
}
}
@joyce11 ,
I will fix it but product name and price will be overlaping.
like this.
how about instead of adding width height to .card__name, we change the width and height of card__info? I removed all the initial code I added.
Remove this line of code
### Emma Huggie Set
Paste This code:
### Emma Huggie Set
Thank You!
@Zworthkey where can I find this line of code?
Paste This in theme.scss file.
.card__name {
width: 105% !important;
}
Thank you!
@Zworthkey the code doesn’t work is there something else we can do? really appreciate all the help thus far.
can you add me as a staff so that i can solve your problem
Thank You!
Yes! What is your email?