Too much space between vertically oriented columns on small screens

Tomas,

You have CSS within your themes style.css file that is adding a 20px margin to the bottom of the columns. You would have to overwrite this in the css that targets screen widths

media="all"
.five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {
float: left;
margin: 0 0 20px;
padding-left: 3%;

@media only screen and (max-width: 600px)
.five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {
padding: 0;
width: 100%;
}

Try adding margin-bottom: 0px !important; to the last statement above.

Thank you so much!

I couldn’t find exactly that code, and I didn’t follow your advice exactly. Instead I changed the 20px to 0 in the part of the Genesis Minimum theme that looked like this:

/* Column Classes
———————————————————— */

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin: 0 0 20px;
padding-left: 3%;
}

After changing 20px to 0 Everything seems to work as before on my stationary computer wide screen but, exactly as I wanted, I have got rid of the extra space between paragraphs as the two columns become vertically oriented on small screens.

Can anyone see a disadvantage of the zeroing the 20px from this part of the css?

Glad it worked out for you…