How can I make custom page templates full width on Debut Theme?

Shopify Discussion
1

Hi all!
I am currently updating our online store - cmarket.ca I am using Debut Theme and have a question about making pages full-width.
The home page is full-width by default but only for some items. The rest aligns with the middle of the page.

The custom page templates I am creating are not full-width, they also align in the middle of the page.

Can anyone please help and guide me on how to make the templates full-width?

Best,

Arish

2

This is a common topic with existing discussions , most are CSS only solutions.

https://community.shopify.com/c/forums/searchpage/tab/message?filter=location&q=debut%20full%20width%20page&location=category:en&collapse_discussion=true

Most all templates PURPOSEFULLY have a safety bleed edge for all sections except those sections that have it’s own design with padding/margin preventing content from being clipped.

So keep that in mind when adding/changing things like whitespace that were designed with intent by professionals.

You’ll notice full-width is only allowed for background imagery , while text and buttons are still kept a healthy distance from any edges.

For non-css based changes for specific one/sets of content.

You will want to make an alternative template changing the html classes to change it’s behavior for grid-system used by that theme Debut.

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-template

Always backup code before making changes

Look in the page.liquid template it’s content wrapper div has a .page-width class that may nor may not need to be removed based on any other changes; or even needs it’s own customer .full-page-width CSS class created to prevent edge issues.

Then that elements in turn contains two more wrappers for the grid-system it’s child with the class .grid and a grand-child with class .grid__item; do not remove those classes.

Leave .grid and .grid__item on their wrappers.

The .grid__item element needs to have other classes removed , such as .medium-up–five-sixths and .medium-up–push-one-twelfth , and possibly replaced with the class .medium-up–one-whole.

3

Hi Arish,

You could achieve a full-width layout by editing/overwriting the CSS.

One step forward can be the following CSS, added at the end of your base.css file:

.page-width {
  width: 100% !important;
  max-width: 100% !important;
}

Overall, the task can get pretty time extensive - and if the edits are done incorrectly, it may spawn unwanted errors/bugs. Without coding knowledge, I’d suggest to hire a web developer.

All the best!

Gabriel

4

@CMarketCoffee_1

if possible to share issue screenshot