A user working with the Sahara template seeks to make their collection/shop items display at full width, matching the rest of their website.
Solutions Provided:
Three different CSS/HTML approaches were offered:
<style> tags in theme.liquid above the </body> tag<head> tag in theme.liquid.collection .container styling (margin, padding, max-width set to 100%)Issue & Resolution:
The base.css solution worked best initially, keeping filters properly padded from screen edges. However, a breakpoint issue emerged on larger monitors (27-inch, ~2170px width) where excessive padding appeared.
A follow-up code snippet from ThePrimeWeb resolved the breakpoint problem completely. The user confirmed this final solution worked perfectly and expressed gratitude for the community assistance.
Status: Resolved with combined CSS modifications to achieve responsive full-width collection pages.
Hi there,
I have been checking through these forms and I’m still looking for the correct solution. I am using the Sahara template and my site can be found here: https://ff3bbd-4.myshopify.com/
What I’m hoping to achieve is to have my shop/collection items go full-width, like the rest of the website I have built so far - is this possible or not?
Thank you in advance
Hey @Joelc09
Follow these Steps:
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hey @Joelc09 ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Hello There,
.collection .container {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
This one is working best so far as the filters at the top are padded out from the edge of the screen.
Only 1 issue - I have a 27inch monitor, as you can see in the attached reference once I go past the breaking point the padding starts to open up. By what I can see its anything over around 2170px width
Hey @Joelc09 ,
You can also add on this code using the same steps mentioned above, don’t remove the previous one.
This worked perfectly mate - glad I jumped on here to ask, I wouldn’t have been able to do this!
Thank you very much