Sela template column.

• 

  lisahathorn1032 · Member · Nov 18, 2015 at 1:39 am

  • Copy link
  • Add topic to favorites

  Can I create two text columns within the Full width page in the Sela template? Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 19, 2015 at 9:15 pm

  • Copy link

  With Sela being a responsive designed theme that adjusts to screen/window width to keep your content prominent and readable, even on phones, this should likely be limited to a certain screen/window width and wider, otherwise on phones, there may end up being only one or two words on a line making it very difficult to read.

  I’m not seeing much as far as content on your site so far, but the following would be a way to do this from within the page editor with inline styling.

  <div style="width:40%;padding:0 10pt 0 0;float:left;">
  Column 1 info here
  </div>
  
  <div style="width:40%;padding:0 10pt 0 0;float:right;">
  Column 2 info here
  </div>

  With the above solution though, the content will stay in two columns, even on a phone.

  The best solution would be a combination of the two, CSS and then of course some HTML in the page itself. Something like this.

  .col-left {
  float: left;
  width: 40%;
  }
  .col-right {
  float: right;
  width: 40%;
  }
  @media screen and (max-width: 600px) {
  .col-left, .col-right {
  float: left;
  width: 100%;
  }
  }

  and then in the page it self, from within the Text tab, you would do this.

  <div class="col-left>
  left column content
  </div>
  
  <div class="col-right>
  right column content
  </div>