[Resolved] Put two full (not contained) sections side-by-side at half width?

Home Forums Support Put two full (not contained) sections side-by-side at half width?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #356656
    Katie Jones

    Hi there,

    I’d like to put two full (not contained) sections side-by-side, each taking up half the width of the screen. Has anyone done this, ideas for doing this?

    Thanks,
    Katie

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #356663
    Katie Jones

    Here’s an example (though it’s contained): https://ibb.co/dcAzUk.

    I did this in a custom theme, I’d love to figure out how to swing it in GP so that the first block, “Be Wild” is a section, the grass block is a section, and the “About the Movement” block is a section. I’m hoping to apply a css class “full width”, “half width” to each.

    #356666
    Katie Jones

    Duurrr this is actually REALLY easy. 🙂 Sorry, I thought this would be harder! :p Hope this helps others!

    #generate-section-1, #generate-section-2{
    float: left;
    width: 50%;
    }

    #356708
    Leo
    Staff
    Customer Support

    Might be better to use GP’s built in grid system:

    <div class="grid-50 tablet-grid-50 mobile-grid-100">
        left content
    </div>
    <div class="grid-50 tablet-grid-50 mobile-grid-100">
        right content
    </div>
    #356821
    Katie Jones

    Thanks, Leo. What’s a clean way to implement this so that all my client has to do, in any template, is specify the section’s class?

    Maybe something like – use jQuery to wrap the section with the div grid-50?

    #356835
    Leo
    Staff
    Customer Support

    Sorry not quite sure what you mean? You can use the code above directly in sections.

    Can also give them extra classes as well if you want to style them individually.

    #356841
    Katie Jones

    I’m looking for a way to do it so that there’s no extra markup in the wysiwyg that my client won’t see in the visual editor, and so they can set sections to be half width, on any page, without my help and without markup / needing to know any HTML. So I was hoping to find a way so that all they have to do is add a class to the section. Does that make sense? What’s a good way to use those docs with this goal? Hook into sections somehow and add the div wrapper if the class is ‘halfwidth’?

    #356842
    Katie Jones

    I’m on a phone, I meant: what’s a good way to use those *divs*. 🙂 Is there a hook into sections? And how can I access the section’s class?

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