Lightweight Column Grids and Sections conflict on mobile

[Mitch]

Using dev tools to see my site on different device sizes, I noticed that in landscape (800×600) and portrait (768×1024), the sections become very small in vertical height, and the content bleeds into other sections.

Also, I haven’t been able to vertically align content within its row using vertical-align:middle. See the second section down for an example. Any ideas?

http://www.peperfect.com

[Tom]

Interesting, can you try adding this after all of your columns at the end of the section?:

<div class="clear"><!-- clear --></div>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitch]

That seems to work. Thanks! Can you explain what that code is doing?

Also, I’ve still got the alignment issue at those screen sizes.

[Tom]

The code clears the floats of the columns.

What kind of alignment issues are you having?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitch]

In the first section below the header, I would like the image and text to be vertically aligned to the middle of the section. Right now, I’m using padding, but it doesn’t work well on the larger table sizes I mentioned earlier. I tried using style in the column shortcode and in a div with no luck.

[Tom]

Vertical centering is very difficult to do.

Padding is the best cross-browser way to do it.

Otherwise you would need to look into using Flexbox, which is still relatively new and hard to accomplish.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitch]

hm… would it be possible to nest 3 rows and have my content in middle row? Then I could make the blank rows not visible on mobile. I tried that with the unsemantic documentation, but could only nest columns.

[Tom]

You would have to use the grid HTML instead of the shortcodes to nest them.

You would always just using margin-top to center it and apply it only on desktop.

For example if you gave your grid a class of desktop-margin.

@media (min-width: 769px) {
    .desktop-margin {
        margin-top: 30px;
    }
}

Then adjust the 30px to whatever works for you.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mitch]

Thanks!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts