Changing the global layout sizes

Hi @bkorzeniowski,

I wouldn’t know how to do that with a PHP snippet, but my recommendation here would be to edit the theme’s css files to modify the media queries that change the way the site displays for each viewport.

To ensure that these changes aren’t erased with a theme update down the road, you should make those changes in a child theme.

Here you can find some documentation about customizing themes through child themes: https://docs.woocommerce.com/document/customizing-woocommerce-best-practices/#section-5

And here’s one doc about customizing a responsive theme: https://docs.woocommerce.com/document/customizing-responsive-theme-best-practices/

I hope that helps!

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

I have resolved the issue. Thread can be closed. In couple of words:

1. Use Storefront sourcecode theme
2. change values in _variables.scss
3. have your complier working (e.g. Atom with Grunt) or CodeKit – I used the former
4. Compile the theme

5. and then carry on working with your child theme

PS. Can this be done solely from the child theme level?

Hey @bkorzeniowski – the reason that you should use a child theme is that as soon as there’s an update for Storefront, your custom code will be overridden.

So if you’ve done this work in step 1-4 in Storefront and not the child theme, you’ll lose all your changes with the next update of Storefront.

I’m well aware of advantages of child theme but how can I modify _variables.scss via child theme – that’s the question.

Oh, you can just copy that file entirely into your child theme and then just compile it into your child them.

But you don’t need to follow that exact structure in your child theme while working with custom CSS or Sass.

Anything you compile into the style.css file of your child theme will get priority over the parent theme, while still adding the original CSS where this isn’t the case.

E.g. if you want to change a $color variable, you’ll need to copy not just the _variables.scss file, but also those files where that variable is used. So you might want to copy all the Sass files over and compile them.