Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
Once you've made the main content responsive, you have to make sure that the images also respond to the size of the screen or window; otherwise, you get a weird effect where the image starts spilling out over the edges. You can see it here, when I start resizing this window, that the image literally spills out over the edge, and if I go down further, you'll see that we start cropping the image with the edge of the window. That is not an ideal situation, and we need to fix it. But there's an added challenge. In WordPress, the author can insert images in many different ways.
From the top here, you see the first image is inserted with a style called None, which means it just flows with the rest of the content. Below that, we have an image aligned to the left, we have one aligned to the center, and we have aligned to the right, and finally, we have an image that has a caption on it, and we need to account for all of these when we create image styles. Fortunately, there's a relatively easy way of making images responsive. What you have to do is tell the browser to set the width of the image to 100% of the containing box.
So in this case the containing box for the image is the container that contains all the content here. We can see it here; it would be the entry-content. So the ideal situation would be that as the window is resized, the image is scaled to fit within that container. To do that, we are going to use a style code called max-width. So I'll go into my style sheet, and I'll find the Image section, and first, I am simply going to apply a style that applies all images. So I'll just say image and I'll set max-width to 100%.
That means the image, at the biggest, will be 100% of the containing container. And then I'll also set height to auto. By setting height to auto, I am telling the browser to automatically resize the height of the image to match in proportion to the width, so that the image doesn't get stretched and start looking weird. When I save this and reload my browser, you'll see, at full resolution it makes no difference, but as we scale the window down, you'll notice that the images now scale along with the rest of the content.
That is, with one exception. If we scroll down to the bottom, you'll see that my caption image still stays the same size, and we're still covering it. And that's what I was talking about. In WordPress we have to account for many different scenarios. So what we need to do here is add in some specific styles that capture all of these different scenarios. If you go to the code snippets file for this course, you'll find that entire stack of code here, at the very top, under 07.02. If you copy that out and paste it in and place it with this simple image call and save it, you'll see that now everything sizes, including the captioned image.
If we go back and look at the code, you see it's still the same code, max-width: 100%, height: auto, and it even has an explanation here of what's going on. And what we're doing is simply applying the style to specific types of images. Size-auto, size-full, size-large, size-medium, these are all the standard sizes in WordPress. We also assign it to the attachment images, which is a different page that you can look at images. We assign it to images in sidebars and we assign it to images with captions.
Before we finish up completely with images, I also want to account for certain specific scenarios where images are handled differently inside WordPress. So I've created another set of style code here that I can copy out from the code_snippets file and paste in, and this applies specifically to images that are aligned to the center and also to captioned images that are aligned to the center. What this style does is it sets the margin to auto on left and right so that the image truly aligns in the center, and also sets a bottom margin to create some extra space.
Again, we're setting the max width to 100% and height to auto, so this is just a custom style specifically for these two scenarios. Save that, open it in the browser, and you now have a set of fully responsive images in your site. When building WordPress themes, it's important to cover all eventualities. By targeting each image insertion scenario, you end up with responsive images no matter where and how they are inserted.
There are currently no FAQs about WordPress: Building Responsive Themes.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.