Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Hey @Joelc09,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.collection .container {
max-width: unset !important;
padding: 0 !important;
}
@media only screen and (min-width: 990px) {
facet-filters-form {
padding: 0 30px !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey @Joelc09
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.
<style>
.collection .container {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This is an accepted solution.
Hey @Joelc09,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.collection .container {
max-width: unset !important;
padding: 0 !important;
}
@media only screen and (min-width: 990px) {
facet-filters-form {
padding: 0 30px !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
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.
<style>
.collection .media--aspect-ratio>*, .media--aspect-ratio img {
width: 100% !important;
}
</style>
This worked perfectly mate - glad I jumped on here to ask, I wouldn't have been able to do this!
Thank you very much
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.collection .container {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024