How do I increase the general page width of Brooklyn?

Highlighted
New Member
3 0 0

I am using the Brooklyn theme and want to increase the page width of every page.

And what if I want to make every page (not just the product pages) a certain width (like 1600px)? What would the CSS change be?

Thanks a lot!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
166 0 25

Hey Kay,

Phil from the Shopify Support team here.

This one should be a quick fix! 

  1. In your admin click on Online Store > Themes > then click on the 3 Dots (ellipsis) at the top right and select 'Edit HTML/CSS'
  2. Open up the timber.scss.liquid file under the assests folder
  3. Find the line of code that says this. $siteWidth: 1050px; - this shows up on line 210 for me and could be different for you. Screenshot for reference here: https://screenshot.click/06-38-7o4cn-ckqfl.jpg
  4. Change the pixel width to what you desire
  5. Click 'save' and your done

That should do just what you're looking for and it will effect every page. 

Phil

0 Likes
Highlighted
Tourist
19 0 1

Hi Philip!

I try to do the way you wrote (just change number in $siteWidth: 1050px ), but unfortunatelly I am getting error: An error prevented timber.scss.liquid from being saved.

Is it working for you?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
166 0 25

@March Looks like you're increased the width of your website successfully. I take it that you've solved your problem. 

0 Likes
Highlighted
New Member
1 0 0

I am currently using Debut 2.5.1 for my theme and can't find out how to find my "site width" under my theme.scss.liquid.

0 Likes
Highlighted
New Member
1 0 0

Hello,

I am using the prestige theme and want to decrease the page width of only collection page so can you please help me how can I do this ?


@Philip_K wrote:

Hey Kay,

Phil from the Shopify Support team here.

This one should be a quick fix! 

  1. In your admin click on Online Store > Themes > then click on the 3 Dots (ellipsis) at the top right and select 'Edit HTML/CSS'
  2. Open up the timber.scss.liquid file under the assests folder
  3. Find the line of code that says this. $siteWidth: 1050px; - this shows up on line 210 for me and could be different for you. Screenshot for reference here: https://screenshot.click/06-38-7o4cn-ckqfl.jpg
  4. Change the pixel width to what you desire
  5. Click 'save' and your done

That should do just what you're looking for and it will effect every page. 

Phil


 

0 Likes
New Member
1 0 0

it worked for me thanks

 

0 Likes