CSS: min-width vs. zoom

May 22, 2013

Ran into an interesting quirk today that I don't see a lot of search results for: if you have a min-width set on an element but then set a zoom on an element other than 100%, the min-width (and, one presumes, the max-width) is scaled by the zoom factor. In this case I was working on a responsive design that has a fixed header image for anonymous users. While the body and the header had a min-width of 480px set, when I scaled the header image down, it continued to squeeze below 480px. The fix looked like this:


#guest-bar {
zoom: 70%;
/* min-width of 480 but at 70% */
min-width: 685px;
}

Previously: Ruining Fletch | After this: A Dog Who's Lost Its Bite | All Posts
Tagged: css responsive