Creating two columns in a page

Solved
Shopify Partner
2 0 0

I have District theme and I am trying to create two columns in a page. What am I missing here? I would appreciate your feedback.

 

I have added the following code in my theme.scss.liquid -

.eight.columns.alpha {
width: 40%;
float: left;
}

.eight.columns.omega {
width:48%;
float:right;
}

 

And in my HTML page editor:

<div class="eight columns alpha">
Column 1
</div>
​
<div class="eight columns omega">
Column 2
</div>

 

0 Likes

Success.

Shopify Partner
1838 173 597

Hi,

 

Just from taking a quick look at District theme i.e. no guarantees plus District is a commercial theme so public support is limited or impossible, it is a grid based theme. In fact, it appears to use the same grid system as do most Shopify made themes. So for a 2 column layout you'd simply use

 

<div class="grid">
  <div class="grid__item one-half">First column</div>
  <div class="grid__item one-half">Second column</div>
</div>

If you'd want those to be single column on mobile devices, simply add medium-down--one-whole to the class list.

 

Hope this helps!

I turn coffee in to code - since 1998
3 Likes
Shopify Partner
2 0 0

Thanks Karl, that definately helped! 

0 Likes
Excursionist
18 0 1

Hi Karl

How to write the code so it also works on mobile with one columns?


Is it like this ?:

<div class="grid">
  <div class="grid__item one-half">First column</div>
  <div class="grid__item one-half">Second column</div>
  <div class="medium-down--one-whole">Content fromt first and second column</div>
</div>



0 Likes
New Member
1 0 0

Hi Karl,

 

I was able  to follow your solution to add 2 columns but I can not get them to collapse into 1 column for mobile devices. Where & how do I have to add the class medium-down--one-whole ? FYI I’m using the Mobilia/sydney theme.

 

Thank you very much

0 Likes
New Member
1 0 0

Like this bro:

 

<div class="grid">

<div class="grid__item medium-up--one-half">First column</div>
<div class="grid__item medium-up--one-half">Second column</div>

</div>

0 Likes
New Member
1 0 0

That was so helpful! Thank you!

0 Likes
New Member
1 0 0

chorizo, this worked perfectly. For anyone wondering, Karl's original code works for two columns on both desktop and mobile. But for two columns on desktop and then one column on mobile, use the classes that chorizo used.

All your contents of column one go where it says "First Column" and then same thing for column two and "Second Column"

If you want it on just one page, you just have to edit the html of that one page, no need to go edit the theme code.

0 Likes