Scaling text in button using Bootstrap?

Hi Bret,

In my opinion.. scaling generally isn't the best thing to do - you end up with inconsistent looking sites unless you put tidy up the rest of the design properly.

Instead, I suggest using CSS media queries to "patch up" elements that don't work correctly at lower resolutions, or even swap them out for more suitable mobile counterparts.

Cheers,
Michael

Sure thing - here's the model I generally follow:

1) I design the site on a normal resolution (eg. a widescreen monitor at 1080p or so). Once I'm happy, I move on to step 2...
2) I decrease the browser width until something "breaks" (eg. horizontal scrollbar, hidden text.. etc..)
3) I add a css patch with max-width set to above the resolution that breaks the site
4) Rinse and repeat #2 and #3 until I get down to the smallest horizontal resolution. I normally end up with 3 - 4 variations (depending on the site).

In the end, my css looks like this:

<normal css for desktop version>

@media only screen and (max-width: 1050px) {
.classname { /* blah blah */}
#id { /* blah blah */}
}

@media only screen and (max-width: 768px) {
.classname { /* blah blah */}
#id { /* blah blah */}
}

@media only screen and (max-width: 480px) {
.classname { /* blah blah */}
#id { /* blah blah */}
}

How this works is pretty simple - css is processed top to bottom, with the most specific, last configuration winning. eg.

div {
font-size:10px;
}
@media only screen and (max-width: 1050px) {
div {
font-size:20px;
}
}

On a high resolution display, div.font-size will have a value of 10px. On a lower resolution display, div.font-size will be 20px, as it has been overridden by the lower resolution version, as it is later in the configuration and has been enabled (by the max-width query).

Cheers,
Michael