WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Best way to create blank columns? (8 posts)

  1. supergplus
    Member
    Posted 5 months ago #

    I understand that Quark works with a 12 column grid. What I'm struggling to understand is how to create content that has, say 2 columns on each side that are blank. As an example, I'd like to create a block of content that is:

    2 blank columns
    3 columns of content
    2 blank columns
    3 columns of content
    2 blank columns

    What's the best way to do this? I tried doing <div class="col grid_2_of_12"></div> but since there's no content in it it didn't affect the page.

    Appreciate the help!

  2. ahortin
    Member
    Theme Author

    Posted 5 months ago #

    If you wish to change the columns or create a new template using that column layout you mentioned, you would need to do something like...

    <div class="templatecontainer">
      <div class="site-content row">
        <div class="col grid_2_of_12">Add your content here</div>
        <div class="col grid_3_of_12">Add your content here</div>
        <div class="col grid_2_of_12">Add your content here</div>
        <div class="col grid_3_of_12">Add your content here</div>
        <div class="col grid_2_of_12">Add your content here</div>
      </div>
    </div>

    The div 'site-content row' will create the row to contain your columns. The class 'site-content' has a max-width of 1200px wide (unless you've changed this of course).

    Since each column is floated left, if there's no content in the container, it will just collapse as per any floated container.

  3. supergplus
    Member
    Posted 5 months ago #

    Thanks for getting back to me so quickly. You brought up my issue--if there's no content in the container, it will collapse since it is floated left. In your example of html, is there a good way to do something like this:

    <div class="templatecontainer">
      <div class="site-content row">
        <div class="col grid_2_of_12">No content but column does not collapse</div>
        <div class="col grid_3_of_12">Content displays normally</div>
        <div class="col grid_2_of_12">No content but column does not collapse</div>
        <div class="col grid_3_of_12">Content displays normally</div>
        <div class="col grid_2_of_12">No content but column does not collapse</div>
      </div>
    </div>

    In bootstrap I think they refer to it as "offsetting": http://getbootstrap.com/2.3.2/scaffolding.html

  4. tb92767
    Member
    Posted 5 months ago #

    If you want to do an offset bootstrap style you need to add this to your grid.css file:

    .offset_11 { margin-left: 91.46% !important; }
    .offset_10 { margin-left: 83% !important; }
    .offset_9 { margin-left: 74.54% !important; }
    .offset_8 { margin-left: 66.08% !important; }
    .offset_7 { margin-left: 57.62% !important; }
    .offset_6 { margin-left: 49.16% !important; }
    .offset_5 { margin-left: 40.7% !important; }
    .offset_4 { margin-left: 32.24% !important; }
    .offset_3 { margin-left: 23.78% !important; }
    .offset_2 { margin-left: 15.32% !important; }
    .offset_1 { margin-left: 6.86% !important; }

    Then add the offset class to the column you want to offset. For example:

    <div class="col grid_8_of_12 offset_2">

    (the !important overrides the .col:first-child { margin-left: 0; } for first columns)

  5. tb92767
    Member
    Posted 5 months ago #

    Oh and of course you'll need to undo this in your media queries because it will mess up the responsiveness.

  6. supergplus
    Member
    Posted 5 months ago #

    Great, thanks for this. I started going down this road and it's great to hear that it is how you are accomplishing it too. Really appreciate it.

  7. ahortin
    Member
    Theme Author

    Posted 5 months ago #

    Thanks @tb92767. Yep, that's what I was going to recommend as well. Adding in some classes with margin-left to allow for blank columns.

  8. tb92767
    Member
    Posted 5 months ago #

    :)

Reply

You must log in to post.

About this Theme

About this Topic

Tags