[Resolved] Line break (clear float) after columns (two questions!)

Home Forums Support Line break (clear float) after columns (two questions!)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1061356
    Henry

    Thanks for taking a look at this.

    Two things pls!

    1. I am trying to have two columns and would prefer to use HTML (the inbuilt unsemantic grid) like this:

    <div class="grid-container">
      <div class="grid-33 mobile-grid-100">
        I am 33% on desktop and 100% on mobile.
      </div>
      <div class="grid-66 mobile-grid-100">
        I am 66% on desktop and 100% on mobile.
      </div>
    </div>

    Am I correct that the columns need the “grid-container” because if they do then your documentation needs correcting or better explained here: https://docs.generatepress.com/article/creating-columns/

    2. I’m finding that these columns screw up the content below. Is there a clear div or clear float that you’d recommend to use?

    I believe to clear floats you just use: <div class="clear"></div>

    As suggested here: https://unsemantic.com/css-documentation#8-clearfix

    Am I correct with this? Thanks!

    * I should add that I have tested it but am unsure about #1 thanks!

    #1062059
    Leo
    Staff
    Customer Support

    Hi there,

    1. grid-container isn’t necessary. It just wraps the container width around your content.

    Most of the time it the content should already be wrapped inside grid-container class.

    2. Yup clear class should work. I should mention that the grid method is a bit old and I wouldn’t recommend it nowadays.

    My suggestion is to look into Flexbox method:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Or a block plugin that allows you to set uneven columns.

    This will absolutely be a feature in our upcoming block plugin 🙂

    #1063462
    Henry

    thanks Leo worked great

    #1063466
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.