Help With Code cant figure out theme.css of the page

Technical Q&A
1

hello i have a retailer page

https://www.moxyeats.com/pages/retailers

where all the content is smashed to the middle of the page. i was able to change in inspector mode to find the css needed to change page, but when i go to edit the css i cant locate the line of code to make the content of the page full width

this is how the pages looks now

the before with content smashed in the center
the before with content smashed in the center1868×1994 69.3 KB

2022-03-04 13.44.38 itpsxcy8gm5548wm-26783514793.shopifypreview.com 3dc6c44f846e.png
2022-03-04 13.44.38 itpsxcy8gm5548wm-26783514793.shopifypreview.com 3dc6c44f846e.png400×291 20.1 KB

and this i want it to look like this with the width of the content taken up the full width

So…

the element i want to change is

when i view code in inspector mode the sources are

line 2533

/* Sixths /
.push–large–one-sixth {
/ left: 16.666%; */
}

and

line 1633

.large–two-thirds {
/* width: 66.666%; */
}

changes what i want on the page if i remove or uncheck them

but when i go to try and find in theme.scss i cant find to make the changes

2

@tscc ,

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 768px){
    body#retailers .page .grid__item{
    width: 100% !important;
    max-width: 90% !important;
    display: block !important;
    margin: 0 auto !important;
    left: unset !important;
    padding-left: 0 !important;
    float: unset !important;
}
}

Changing the code where you have pointed would change the layout in other places as well. In cases like this it’s important to isolate the changes so it doesn’t yield unwanted results.

Kind regards,
Diego

1 Like