Different page widths Supply theme

Highlighted
Tourist
5 0 1

Hey,

So to jump right in: the home page and product pages have the same width but any other new page I add with general information like an about us page is way smaller. Where can I adjust this to get same widths on all pages? 

0 Likes
Highlighted
Tourist
5 0 1

I found the solution myself, if anyone is interested in changing the width of pages you can adjust it in page.liquid. Below I made the line of code dark which I changed from small--two-thirds push--small--one-sixth to the code below. In the theme.scss file you can look up what the medium and small sizes are and adjust accordingly.

Although this worked for me, I think there is a more precise way to do it (I could only choose between small, medium and large) but I am not a programmer. Anyway, maybe it helps ;)

 

{% include 'breadcrumb' %}

<div class="grid">

  <div class="grid-item medium--two-thirds push--medium--one-sixth">

    <h1>{{ page.title }}</h1>

    <div class="rte">
      {{ page.content }}
    </div>

  </div>

</div>

1 Like
Highlighted
New Member
4 0 0

Thanks for this!

 

To adjust it even more i used, hope it helps: 

 

<div class="grid">
{% include 'breadcrumb' %}

 

<h1>{{ page.title }}</h1>

<div class="rte">
{{ page.content }}
</div>

 

</div>

 

The above doesn't make it responsive though!

0 Likes
Highlighted
New Member
4 0 0

Final Fix!

 

Got it from the article template and adjusted :) It is responsive and renders pages full width, in line with navigation.

 

Winning :)

 

{% include 'breadcrumb' %}

<div class="grid grid-border">

<div class="grid-item large--one-whole">
<div class="grid">
<div class="grid-item large--one-whole">

<h1>{{ page.title }}</h1>

<div class="rte">
{{ page.content }}
</div>

</div>

</div>
</div></div>

0 Likes
Highlighted
Tourist
4 0 1

Superb! Just what I was looking for.

Too much surplus code, though. This is cleaner and worked like a charm to make new pages fit the Supply theme width:

{% include 'breadcrumb' %}
<div class="grid">
  <div class="grid-item large--one-whole">
    <h1>{{ page.title }}</h1>
    <div class="rte">
      {{ page.content }}
    </div>
  </div>
</div>
0 Likes