Tom Clancy

CSS: min-width vs. zoom

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;
}

Other articles

HP: W3C Print CSS Testing

Published: Tue 06 January 2009
By Tom Clancy

In Portfolio.

tags: css w3c

HP: W3C Print CSS Testing

2009-01-06

Sponsored by HP, I worked with the W3C to create tests so browser/ user-agent programmers can make sure their code conforms to CSS2.1 and CSS3 Print standards.

A long and ultimately very rewarding project that started out by teaching me some humility. Coming …
read more
Logica: LogicaCMG Merger Website

Published: Tue 31 December 2002
By Tom Clancy

In Portfolio.

tags: css

Logica: LogicaCMG Merger Website

2002-12-31

In under 30 days, re-branded and re-skinned our biggest client’s new site and did the whole thing as PixelMEDIA’s first all-CSS website.

In late 2002, with two years’ experience under my belt and a long Christmas vacation already scheduled, I got a …
read more

Other articles

HP: W3C Print CSS Testing

2009-01-06

Logica: LogicaCMG Merger Website

2002-12-31

social