Hey, I haven’t figured it out myself so need some help here. This is what my website looks like right now:
This is how I want it to be:
The differences here are the size of each product card (on the second image product cards are way bigger), and the size/width of this overall section. Specifically, you can see that the width is bigger on the second image if you look at the padding on the sides of the screen and also at the distance where the “HOT SALE” text is located on both images. So can I achieve the result I want?
My website URL: https://trivlen.com/
Add this code to Custom CSS of that section in Online store > Themes > Customize
.page-width { max-width: 100% !important; }
Tried, but it doesn’t work. It says “Invalid custom CSS”, and highlights “.page-width” red
So please add this code to your theme.liquid file before tag
#shopify-section-template--20103583957316__featured_collection .page-width { max-width: 100% !important; }
Hey @Dan-From-Ryviu , thanks, this one does work, but I had to put it not before the , but here:
Also, as good as everything looks on the desktop, there’s something insane going on on mobile:
It already was bad on mobile after I added this into the custom CSS:
But now after I applied the last code it looks entirely broken. So is there a way to make these two codes work only on PC? (I mean the one you gave me in this post and the one that is in the custom CSS)
Please move code that you added in Custom CSS to theme.liquid file too but change code to this
#shopify-section-template--20103583957316__featured_collection .grid { column-gap: 19px }
It fixed everything. Thank you very much
Very welcome, @Chicha7272
