[PLEASE HELP!] Creating a full-width page in Debut theme - issues

Highlighted
Tourist
8 0 2

Hi everyone,

I'm new to liquid but have tried to code a full width page template, and am almost there, I just have a few issues that I'm hoping someone can give me some advice on the liquid/CSS. I'm using Debut as my theme.

I've managed to get my full-width image across the top, heading overlaying the pic and the page text confined to it's usual position which I'm happy with, but the issues I am having are:

  • I can't get the image to move up to right under the nav bar - ie. where the line is (I managed to do this by removing the padding in the .main-content css, but obviously that did it for all pages and this looks ridiculous for pages with a heading and not a pic at the top, so want to move the image up for just this template).
  • When the screen is shrunk in responsive mode the image shrinks but does not remain full width, how do I fix this?
  • When viewed on a phone the page text hits the left-hand side of the screen :(

This is my test page I'm using it on: https://www.wellgroomed.ie/pages/full-width-test-page

Password is HAYGAW

See below screenshots of what I'm trying to achieve and my code so far.

page.fullwidth.liquid

<div class="grid grid--no-gutters image-bar image-bar--">
  <div class="grid__item">
      <div class="image-bar__content">
  <div><img src="https://cdn.shopify.com/s/files/1/2056/8131/files/full-width-test-image-300-deep.jpg?164099795216719..."></div>
          <div class="image-bar__text">
            <h1 class="image-bar__captionfull">{{ page.title }}</h1>
</div>
    </div>
  </div>
<div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
      </div>
       {% section 'fullwidth-page' %}
  </div>
        </div>
    </div>



Section: fullwidth-page-liquid

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

Responsive view on computer:

View on the phone screen:

0 Likes
New Member
1 0 0

Hey there! I was you a couple of months ago... lol! For me to achieve this, I downloaded a free App called Custom CSS by Heaven 3000 and added the following:

.page-width {
    max-width: 1800px;
    margin: 0 auto;
}

Not sure if this is what you are trying to do, but my site looks a thousand times better with the wider width. Check it out here: https://faroutfab.com/

 

0 Likes