How to Create a Page Template with Smaller Margins

[claribelskincar]

I'm trying to create a landing page with images, using the normal Page format, but when I include my images, there is a gigantic left and right margin, making the page look odd.  Is there a some advice on how I could create a template with very minimal margins?

Is that the route to take?  This is the page in question: https://claribelskincare.com/pages/antioxidant-skin-serum

[Laza_Binaery · Accepted solution]

Hi @claribelskincar 

Welcome to the community.

If you are OK with editing some code, then the process is not so bad. 

1. In your Code view, under Templates create a new template named, for example," page.wide.json"
2. There copy following code 

{
  "sections": {
    "main-wide": {
      "type": "main-page- wide",
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    }
  },
  "order": [
    "main-wide"
  ]
}​

• Next, in sections, create a new section " main-page-wide.liquid" : 

{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="page-width section-{{ section.id }}-padding">
  <h1 class="main-page-title page-title h0{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page.title | escape }}
  </h1>
  <div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {{ page.content }}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.main-page.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}​

•  Then in Pages, change page template for the page you want
• It should be better.

I removed just "page-width--narrow" class so if you want all pages to be regular page width, then you can just make change in the section main-page

https://github.com/Shopify/dawn/blob/main/sections/main-page.liquid#L17, and it will fix all pages. 

Try it out, backup the theme first, or create a copy.

[claribelskincar]

Hi Laza,

I'm receiving a save error message when copying in the first part of the code you've recommended, see screenshot attached.  Can you please advise?

[claribelskincar]

I fixed it, thank you so much.

[Laza_Binaery]

Hi @claribelskincar

Glad you sorted it out, I missed that space in ""type": "main-page- wide", line. 

[claribelskincar]

You saved the day! ✨👍

[devcoders]

Hello @claribelskincar 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.page-width--narrow {
max-width: 160rem;
padding: 0 5rem;
}