Shopify Turbo Theme Changing Margins on Collection Pages for Desktop

Highlighted
New Member
4 0 0

Here is the link to a page on the store that I am trying to work on. 

https://bfreshgear.com/collections/visor-shades

 

I would like the products to take up more of the page left to right on Desktop. Mobile version is fine. Any help would be great. 

 

Screen Shot 2020-09-26 at 1.09.59 PM.png

0 Likes
Highlighted
Shopify Partner
1079 170 195

Hi There!

Add the following code to your theme.scss file:

@media only screen and (min-width: 768px)
{
.container {
    max-width: 80%;
}
}


Let me know if that works!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
4 0 0

Hello!

 

Thank you for the quick reply. I do not have a theme.scss file. I do have a theme.liquid file and I put it at the end of that and it did not work. 

0 Likes
Highlighted
Shopify Partner
1079 170 195

Search for "css" in your file name and you should find the file, it is surely there. 

Cheers! 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Shopify Partner
427 44 63

Hi @FreshGuys ,

You can add the code by @JHKC to your collection.liquid file (Template > collection.liquid) like below.

<style>
@media only screen and (min-width: 768px)
{
.container {
    max-width: 80%;
}
}
</style>

 

Let me know if you need help with anything else.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
New Member
4 0 0

This s what I get when I search for css? I am in the right spot correct. Again thank you for your help!

 

Screen Shot 2020-09-29 at 12.12.53 PM.png

0 Likes
Highlighted
New Member
4 0 0

So my collection.liquid looks like this. I added the code there as well as the sections/collection-template.liquid file but it still did not get rid of those margins. Is there a specific spot where I need to put it. I tried the top, bottom, and middle. Thanks!

 

Screen Shot 2020-09-29 at 12.14.43 PM.png

0 Likes