Debut - Creating Columns on Pages in Shopify

New Member
5 0 0

Hi, My simple question is how can you add a row and two columns. 

I was able to find this code 

.one-half-column-left {
width:48%;
float:left;
}

.one-half-column-right {
width:48%;
float:right;
}

@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right, 
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}

 But what i am after is to simply make a square

i have attached a photo of what I mean

and link to site https://adamtheflowerman.com.au/pages/about

thanks, 

 

0 Likes
Shopify Expert
564 24 89

This is assuming you're using the latest version of Debut (11.1.1).

 

Create a new alternate page template named "two-columns" and paste this  code into the template (see https://help.shopify.com/en/themes/customization/store/create-alternate-templates for instructions):

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        <div class="left-column">
        {{ page.content | split: "<!-- SPLIT -->" | first }}
        </div>
        <div class="right-column">
        {{ page.content | split: "<!-- SPLIT -->" | last }}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .rte .left-column {
    max-width: 50%;
    float: left;
    padding: 0 10px 0 0;
  }
  @media (max-width: 990px) {
    .rte .left-column {
      max-width: unset;
      float: none;
      padding: unset;
    }
  }
</style>

Then create your page, set it to use the alternate template you just created (https://help.shopify.com/en/themes/customization/store/create-alternate-templates#assign-your-templa...), and put the following piece of code between the two columns (you'll need to switch to the editor's HTML mode as described here: https://help.shopify.com/en/manual/productivity-tools/rich-text-editor#add-html-content-with-the-ric...):

 

<!-- SPLIT -->

 EDIT: added responsive styles

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes
Excursionist
19 0 0

Hi Thomas

It is not working for me. 
It is duplicating the images and text. 

E.g. If I write one text line, then it duplicates it into both left and right column.

 

How should I use this template to avoid this?

0 Likes
Highlighted
New Member
6 0 0

looks great on desktop but clunky on mobile though.

0 Likes