Archived topic
Line break (clear float) after columns (two questions!)
3 replies · Started by Henry on November 12, 2019
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!
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 :)
thanks Leo worked great
No problem :)
