Lightweight Column Grids and Sections conflict on mobile

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

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

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.

The code clears the floats of the columns.

What kind of alignment issues are you having?

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.

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.

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.

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.

Thanks!

You're welcome :)