A user seeks to make their collection page product grid full-width by eliminating side margins on both desktop and mobile versions. They’re using the Stiletto theme and provided reference images showing desired layout changes.
Solution Provided:
<head> tag.container elements with max-width: 100% !important; and removes paddingOutcome:
Hello!
I would like to make the products fill the entire screen on the collection page and have no margins on the sides, basically making the product grid full width (both in the desktop and mobile versions).
My theme is Stiletto, my website is https://winnerofficial.com/collections/ss-2024 and my password is y21.
I have tried different codes and nothing works!
I am attaching reference photos (the red rectangles are the areas where the images should extend):
Desktop:
Mobile:
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme. liquid file and add the following code to the head tag
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
It worked! Thank you!
Thank you for your reply. I’m glad to hear that the solution worked well for you.
If you require any more help, please don’t hesitate to reach out.
