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 -
And in my HTML page editor:
<div class="eight columns alpha"> Column 1 </div> <div class="eight columns omega"> Column 2 </div>
Solved! Go to the solution
This is an accepted solution.
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!
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>
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.