Debut Theme, making grid full width.

Solved
Tourist
13 0 2

Hi everyone as the title says I am struggling to change the width of the page grid, I tried many things but nothing worked.

I am going to post a few photos that I can make you understand better what I want.

Screenshot (3)_LI.jpgScreenshot (4)_LI.jpg

How you can see up, my products are on the center of the page and I want them to be full page as the header or the photo under are, if somebody can help me that will be great, thank you!

0 Likes

Success.

Shopify Partner
1559 116 323

Hello and welcome to the community!

 

While it is easy to make that change, I am afraid it won't give you the desired effect because as the product grid becomes full width, it still won't adapt the product cards accordingly - you will still see 5 (or how many you set per row) instead of having more per row as more row space becomes available.

 

Still, if you want to try it, you need to go to Online Store > Themes then click Actions > Edit code and from the editor that loads, open the file Assets / theme.scss.liquid. Once open, find this line of code

/*================ Sizing Variables ================*/
$width-site: 1200px;

And change it for

/*================ Sizing Variables ================*/
$width-site: initial;

Hit Save and check it out.

 

Best wishes!

I turn coffee in to code - since 1998
1 Like
Tourist
13 0 2

Hi Karl,

Thank you for taking the time to look into this, even if I would not be able to add more then 5 products per row, with the change you suggested looks much better, thank you for that. 

Best wishes to you too! 

0 Likes
Tourist
13 0 2

Hi, again Karl,

Sorry to bother you, after I changed 

$width-site: 1200px;

to

$width-site: initial;

I have checked the website better and I realized that the grid is now full page on products pages, also on the home page but it affected me the footer and also the Login and Create an account page as you can see on the images below, any idea how I could fix that to be centered how it was when the width-site was on 1200px ?

Screenshot (5).pngScreenshot (6).pngScreenshot (7).png

0 Likes
Highlighted

Success.

Shopify Partner
1559 116 323

Yes, this affects the entire page container which is used for all templates of the theme. In very broad terms, the theme is divided in a header with menu etc., the main content area (product grid, product detail, pages etc. and the footer section. Each of those have a nested element that gets the page-width class assigned to contain child elements to that width. Since we set the page-width to be the default auto / inherit value, i.e. 100% width, they/re now all bound to the same rule.

 

You have two options, whichever would be more feasible for you. You can add inclusive or exclusive rules to override the global page-width depending on what the parent element is. For example, say you only wanted the main content area to be affected on all pages, then you would add following rule to the end of your stylesheet

 

.main-content .page-width {
    max-width: inherit;
}

 which instructs page-width to inherit its parent default width (usually 100%) only if it is a child of main-content.

 

You could make it even more specific by section. Let's say you only wanted to affect collection pages. Collection pages have a section with a data attribute such as data-section-id and because its a collection template, the value is collection-template (derived from the liquid template file name)

 

[data-section-id="collection-template"] .page-width {
    max-width: inherit;
}

You could also take it the reverse way by defining exclusive rules. For instance, you'd set the general page-width as we did in the previous reply to auto or inherit. That makes everything go full width at 100% or whatever the parent element width is. But now we can write rules which elements should not follow that rule. Example, say the footer should still be constrained to 1200px

 

#shopify-section-footer .page-width {
    max-width: 1200px;
}

And so on and so forth.

 

Hope that made sense and helps you find a good fit for your store.

I turn coffee in to code - since 1998
1 Like
Tourist
13 0 2

Thanks for taking the time to help me, 

Everything you write makes sense, I have fixed my footer with the following code

.site-footer {
  .page-width {
    max-width: 1200px;
    margin: 0 auto;
    }
}

and the Login/Create an account page with the following code:

.medium-up--one-half {
float: none;
margin: auto;
}

I've posted them here maybe somebody will face the same problem and it could be usefully.

 

Thank you one more time, have a great Week!

1 Like