This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Column Stack Customization

  • Creator
    Topic
  • #24264
    jbabin87
    Participant

    Hi,

    I have a page on my site that has a lot of text and pictures, and I’m using column’s to alternate the images/text.

    So, row 1 is image on the left, content on the right. Row 2 is content on the left, image on the right. Row 3 is image on the left, content on the right.

    This is great, but when it stacks I want to reverse the stack of every other column, so that on mobile it’s image then text, then image, then text, etc. Without reversing it it’s image, content, content, image, image, content.

    Is it possible to customize the stack? If not, I’ll have to choose which version I want it to look good on, desktop or mobile, which I prefer not to do!

    Thanks,
    JT

Viewing 8 replies - 1 through 8 (of 8 total)
  • Author
    Replies
  • #24269
    Jason Bobich
    Keymaster

    Hi JT,

    When you use the column shortcodes, you’re utilizing the built-in framework Twitter Bootstrap. And for those that understand the more advanced ins-and-outs of Bootstrap’s grid system, our [column] shortcode does have a “class” parameter, which you can use to add custom classes to the columns.

    Here’s the relevant Bootstrap documentation: http://getbootstrap.com/css/#grid-responsive-resets (read about pushing and pulling)

    So, for example, you could do something like this:

    [raw]
    [column size="1/3" class="col-sm-push-8"]
    The picture ...
    [/column]
    [column size="2/3" class="col-sm-pull-4"]
    The content ...
    [/column]
    [/raw]

    In this example, the picture would appear on the right and the content to the left, when on desktop. And on mobile, it will display in the natural content flow order.

    If you were to just manually write out the HTML directly, it would look like this:

    <div class="row">
        <div class="col-sm-4 col-sm-push-8">
            The picture ...
        </div>
        <div class="col-sm-8 col-sm-pull-4">
            The content ...
        </div>
    </div>
    #24274
    jbabin87
    Participant

    Thank you so much, this is exactly what I was looking for.

    #24539
    bchastain
    Participant

    What would the workflow be when using the Layout Builder columns?

    #24540
    bchastain
    Participant

    Also, when you narrow the viewport on the Denali agency starter template, the columns lose their images at certain viewport sizes. Is this a “feature” or a bug in the css?

    see: http://demoblvd.com/themes/denali/demo-3/

    • This reply was modified 5 years, 7 months ago by bchastain.
    #24542
    bchastain
    Participant

    Was able to get the push/pull to work using the layout builder. Is the push/pull functionality something you’d consider adding to the layout builder core feature set? ( a checkbox to enable push/pull ).

    Still wondering about my last question regarding the images being lost at certain viewport widths.

    Thanks. Still loving the theme/framework. Keep up the awesome work.

    • This reply was modified 5 years, 7 months ago by bchastain.
    #24545
    bchastain
    Participant

    Here’s the page in question so far… http://blaynechastain.net/projects/

    #24548
    Jason Bobich
    Keymaster

    What would the workflow be when using the Layout Builder columns?

    In the same way the shortcodes allow for a custom class to be passed, the layout builder columns also allow for a custom class through the display options. So, any custom classes you want to pass through to the column itself can be done there.

    Also, when you narrow the viewport on the Denali agency starter template, the columns lose their images at certain viewport sizes. Is this a “feature” or a bug in the css?

    This is just the design of the layout I did. It’s done by utilizing that same custom CSS class option of the column, to pass in Bootstrap utility classes.

    http://getbootstrap.com/css/#responsive-utilities

    So, on the images you notice are being hidden, edit the same CSS class field of the column it’s contained in, and just remove the hidden-sm class that has been added there.

    Was able to get the push/pull to work using the layout builder. Is the push/pull functionality something you’d consider adding to the layout builder core feature set? ( a checkbox to enable push/pull ).

    I probably wouldn’t add this as a feature to the layout builder because I think it would be a bit complex, and it wouldn’t be as simple as a checkbox. In your case, you’ve only got two columns, so it’s a little more straight forward. However, the user can have up to five columns, and so this would mean tons of possible combinations of how the columns could potentially be arranged on desktop vs mobile.

    For those that want to do more advanced setups, I’d prefer to just leave the way it is, allowing for people to insert any kind of custom classes they want for accomplishing more complex things.

    #24550
    bchastain
    Participant

    In retrospect, totally agree with you on not adding that to the layout builder. You’ve essentially done this with the custom class field.

    Still totally floored by this theme/framework. Hasn’t let me down yet! Thanks for getting back.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.