CODEWITHSUNDEEP
htmlcssscaling
user1510643
user1510643

Reputation: 131

Heights of divs changing with zoom level

On my sites home page, I have two columns that each contain a different amount of elements. Both columns heights add up to 410px, however, depending on the zoom level of the browser, the bottom of the two columns may not line up. It seems to be most apparent in Chrome, and doesn't appear at all in Firefox.

Is there anything I can do to fix the issue?

The page in question is http://goo.gl/mHU3A, the bottom of the page.

Upvotes: 4

Views: 1326

Answers (1)

Kate
Kate

Reputation: 1638

I'm not sure why Chrome is doing this (As you've said, the heights both equal 410px), but one "hack" you could do is to add the following code (to your css):

.test-home { position: relative; }
.test-home .home-new-tutorial-all {
    position: absolute; /* forces it to sit in a specified position */
    bottom: 0; /* don't worry about a left/right, as all we're concerned with is making it sit at the bottom */
    width: 100%; /* required, otherwise it fits to the text-width only */
}

This will force the .home-new-tutorial-all class to sit at the bottom, no matter what zoom the browser is at. It makes the margin/space between the "Scripting for After Effects Pt 2" and this tutorials link grow a bit, but given this link is a different style, you could get away with saying that it was intentional.

Sorry it isn't a reason why Chrome is behaving strangely, but hopefully this fix will be suitable :)

Good luck!

Upvotes: 2

Related Questions