Becoming Responsive, Part 3: Scaling Elements

Matcha Design - Wednesday, September 2, 2015

You’ve used media queries to soften up your previously rigid web design, and added some nifty mobile navigation for your smartphone-using customers. But you keep running into some elements that just won’t change size the way you need them to. What do you do now? Today we’ll finish up this brief series on responsive web design by discussing some techniques a developer can employ to scale page elements.

matcha-design-Becoming-Responsive-P3.jpg

Images

The most basic CSS to make an image element scalable is straightforward:

.textbox img { width: 100%; height: auto; }

With this code, every image within a container with the class “textbox” will automatically expand to the full width of its container and have its height set accordingly. For example, an image 500 pixels wide and 300 pixels tall, if placed within in an element 250 pixels wide, will shrink to 250px x 150px. If the container is 1000 pixels wide, the image will swell to 1000px x 600px.

If all you’re doing is fixing, say, a header image or hero graphic where the image completely fills its parent container, this might be good enough. But suppose you run into this situation:

<div class="textbox" style="width: 1000px; text-align: center;">

   <img src="..." height="60" width="60" />

</div> 

In this case, the container may be wider (possibly much wider) than the image, but the image probably shouldn’t scale any larger than it already is. Scaling down is fine if necessary, but getting too big would just make a big blurry mess.

The first solution is to add max-width to the CSS:

.textbox img { width: 100%; height: auto; max-width: 60px; }

This prevents the image from growing more than 60 pixels wide under any circumstances.

What if you have several images, all different widths? You could make several CSS rules, or you could use a quick CSS/jQuery combo to make them all self-limiting:

CSS

.textbox img { width: 100%; height: auto; visibility: hidden; }

jQuery

var width;

$('.textbox img').each(function(ix,it) {

 width = $(it).attr('width');

 if (width) $(it).css({'max-width': width, 'visibility': 'visible'});

});

The visibility rules help prevent a brief flash of the full-width image in some browsers. You might also notice that this solution depends on your img elements having their width (and preferably height) attributes set, which is good practice anyway.

Tables

Tables, long ago the king of web design, have fallen by the wayside in modern development. Yet tables still remain useful for displaying tabular data (I know, what a surprise). Unfortunately, tables, flexible as they are, can hit some pretty hard width limits on very narrow screens.

On the upside, you can actually break tables apart with CSS and stack their contents vertically:

@media (max-width: 800px) {

 table th, table td { display: block; }

}

This can make for some very long pages, but this is usually preferable to a completely shattered, unprofessional-looking site.

Block Elements (iframe, canvas, etc.)

Resizing elements like this can get pretty tricky. Blocs like these don’t have a built-in aspect ratio the same way images do. Thus the old “width: 100%; height: auto;” trick doesn’t work, since the native height of any element is 0.

The best solution is to wrap the element inside a div:

<div class="aspect">

 <iframe width="1000" height="450" src="..."></iframe>

</div>

And add this CSS:

div.aspect { position: relative; width: 100%; height: 0; padding-bottom: 45%; }

iframe { width: 100%; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

And add this CSS:

div.aspect { position: relative; width: 100%; height: 0; padding-bottom: 45%; }

iframe { width: 100%; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

This sets the “aspect” div as the parent of the iframe, and gives it a height of 0. Since elements can flow out of containers that don’t have the “overflow: hidden;” CSS applied to them, this doesn’t prevent the iframe from displaying. The iframe is set as wide as its parent and moved to snug up to its top left corner.

But the real clever bit is the “padding-bottom” on the aspect div. While (for somewhat arcane reasons) you can’t set the height on most elements as a percentage of the width, you can do this for padding. So the parent div pushes everything below it down the page, to exactly the right height for the iframe to appear without overlapping anything else.

You’ll notice that the “45%” in the “aspect” div is the same aspect ratio as the original iframe. For elements with different sizing, just set this number to (height/width) * 100.

Summing it up

Making an existing website responsive is never easy. We at Matcha have spent a long time picking up the techniques we’ve discussed here, and several others besides, to help our customers improve their Google search rankings and prepare for the mobile future of the Web. Contact us today to find out how quickly and easily we can change your company’s Internet presence to something you will be proud of.

About Matcha Design
Matcha Design is a full-service creative agency specializing in web designprintidentitybrandinginterface designvideo productionstill photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.