Brooklyn Theme Expand Page Content Width

New Member
5 0 0

Hello everyone! Just about finished getting started here but having some issues trying to figure out how to make the content section of my home page wider. 

For example, you can see in the demo that https://brooklyn-theme.myshopify.com/ everything under the hero slider is constrainted within a certain width. I want to know how I can make the white margins on the side smaller. 

I read in another forum post that it has something do with this section here:

<!-- /templates/page.liquid -->
<div class="grid">
  <div class="grid__item large--one-sixths push--large--one-twelfth">

    <header class="section-header text-center">
      <h1>{{ page.title }}</h1>
      <hr class="hr--small">
    </header>

    <div class="grid">
      <div class="grid__item large--four-fifths push--large--one-tenth">
        <div class="rte rte--nomargin rte--indented-images">
          {{ page.content }}
        </div>
      </div>
    </div>

  </div>
</div>
 

However, nothing seems to change when I edit the part after grid__item.

Any insight would be great :) Thanks! 

0 Likes
Shopify Partner
44 0 12

Hey David, you're on the right track with the grid__item div near the top. The classes after it — large--one-sixth push--large--one-twelfth — are what define the width (and offset it so it appears center). If you remove them both, the content will fill up the width of the parent container.

My assumption is you also want that parent container to be wider. In that case, you'll want to hop into the stylesheet. In Brooklyn you'll find it in your assets folder named theme.scss.liquid. Search that file for $siteWidth. This is a Sass variable that is used to define the width of the .wrapper class. Change 1050px to a higher number and your page will get wider.

Additional note, there is a $gutter variable that controls the padding between the .wrapper and edge of the window on smaller screens. Make this number a bit smaller and that space will be reduced as well. Since this variable is used pretty often, the overal layout of your page may be effected too.

Cheers!

1 Like
New Member
5 0 0

Hi Carson,

Thanks for your response! Greatly appreciate it :) I've tested out the edits that you mentioned with the $siteWidth in theme.scss.liquid but nothing seems to change.

What I have now in templates/page.liquid is the following:

<!-- /templates/page.liquid -->
<div class="grid">
  <div class="grid__item">

    <header class="section-header text-center">
      <h1>{{ page.title }}</h1>
      <hr class="hr--small">
    </header>

    <div class="grid">
      <div class="grid__item">
        <div class="rte rte--nomargin rte--indented-images">
          {{ page.content }}
        </div>
      </div>
    </div>

  </div>
</div>

I've completely removed the class variables after grid__item so my page should go wider as I change the $siteWidth.

So in theme.scss.liquid here:

$viewportIncrement: 1px;
$siteWidth: 1050px;
$small: 590px;
$medium: 768px;
$large: 769px;
$xlarge: $siteWidth + $viewportIncrement;

I've attempted to change that from 1050px to 2000px to 2500px and even 5000px without seeing an effect on page size, my content is still stuck at the original width of the theme. I would've assumed that with 5000px, I would see something drastically changed but nothing at all.

Perhaps I missed something in between or there's something else that's locking it down? I look forward again to your response :)

Thanks!

0 Likes
Highlighted
Astronaut
1890 0 385

Make the same change to $siteWidth in timber.scss.liquid.

2 Likes
New Member
5 0 0

That did the trick! Thanks Alex :) 

0 Likes
Shopify Partner
44 0 12

Forgot it was in both files! Thanks Alex

0 Likes