A typical WordPress theme will have the following elements:
- Body
- Wrapper
- Header
- Menu
- Main content
- Sidebar
- Footer
Our task is now to make sure these have fluid width definitions instead of static ones. We do so by changing the CSS inside the stylesheet.
For an example, let’s start off with the wrapper and say this is what you find inside your stylesheet:
#wrapper {
width: 900px
}
As you can see, this is a fixed width (900 pixels) which we now want to turn into something fluid. It’s actually pretty easy:
#wrapper {
max-width: 900px;
width: 100%
}
What does this change do? Basically, it tells the element to take all the space it needs but limits its width to a maximum of 900 pixels.
That way, the page will look the same as before on any screen larger than 900px but take up the entire width of any device smaller than that.
Easy, right?
However, that’s basically all it takes to make a WordPress theme responsive.
Now all you need to do is go through your entire page structure and turn any fixed widths into fluid widths by changing pixels to percentages. That way, the page elements will automatically adapt to the size of the screen they are being displayed on.
However, the devil is in the details, so here are some important pointers:
- Any element that is nested inside another and can go across the entire screen (or as much space as it has available) can simply be set to 100% width (or even auto or no width). If the parent element (like a wrapper) has a set max-width, the child element will automatically adhere to its dimensions.
- For other elements that need to be limited in how far they expand (such as the main content and a sidebar placed next to one another,) you need to experiment a little to find the right percentage so that the layout stays the same.
- Be aware that percentages in CSS are relative. That means when you set the width of a nested element (an element inside another element) to 70 percent, it will take up 70 percent of the parent element, not of the entire screen. Capisce?
Firebug is your friend here, as it allows you to make live edits and try out CSS changes while seeing the effects on screen.
Still, I can say from experience that it can take a while until you have found all fixed measurements.
Therefore, in addition to Firebug, it might also be a good idea to run a text search inside your stylesheet to find any declarations of widths and while you are at it, height.
The latter is because when the screen size is compressed, any text inside HTML elements will expand vertically.
To make sure it doesn’t break out of its containing element or is cut off, you need to make sure you also don’t have fixed heights. Either don’t declare any height at all or, if necessary, turn it to percentages as well.
Also, a quick note on margins and paddings, which are the space around and inside HTML elements. They make sure there is enough distance between page elements and around content so that everything is understandable and legible.
While it can make sense to put these in relative numbers, many themes out there (for example the Genesis framework) declare them in pixels.
Since these guys know what they are doing, I’m going with their method. However, the choice is up to you.
In the end, you should have a web page that adapts to the size of your browser window when you shrink and expand.
At this point, many page elements will likely look smushed together, which is far from what you want, however, don’t worry, we are getting to that further below.
3. Resize Images
After this, it’s time to make sure our images are automatically scaled according to screen size.
This can be done quite easily by adding the following to style.css:
img {
height: auto;
max-width: 100%;
}
With this, you declare that images should be displayed in their original size until their container element (or the screen) put a limit on it.
Simple but effective!
Of course, you also need to have a look around the stylesheet to see if any other declarations are overwriting this. A search for img helps with that.
In case you need to rebuild images in new sizes to fit your newly responsive design, the WordPress directory has just the right plugin to do so.
4. Implement (The Right) Break Points
After introducing basic responsiveness (or is that responsibility?), we now move on to the break points for your design changes.
These are cutoff points where the website will make some major design adjustments to continue delivering the best layout for your users.
Two things about this:
- Break points should always be design specific, not device specific. There are just too many devices out there to cater to all of them. By concentrating on what makes the most sense for your design, you automatically cover any devices coming out in the future.
- Start with the smallest screen and then work your way up. The easiest way to identify break points is to first make sure your design looks good on mobile phones and then expand the screen from there. When you notice a point at which your design starts to look terrible, that is your break point.
The first time you shrink your browser window to the size of a phone screen, it probably won’t be a pretty site.
One of the classic problems at this point is that elements that are placed side by side are still displayed in their respective widths, yet in a much smaller space, making everything impossible to read.
Therefore, the first order of the day is to make these elements move underneath one another.
A classic example of this is to move the sidebar underneath the content by changing CSS properties with a media query.
This could look like so:
@media only screen and (max-width: 500px) {
.content {
float: none;
display: block;
width: 100%;
}
.sidebar {
float: none;
display: block;
width: 100%;
}
}
Add the query at the end of your stylesheet. The code above also makes sure your content expands across the entire screen and is legible.
After that, it’s time to look at the rest of the page and make any CSS changes necessary so that it looks decent in its current format.
Commit all changes to your newly created media query and save the stylesheet. Well done!
Now you can slowly expand the browser window outward to determine when the layout starts looking unattractive and you need to make adjustments.
At this point, set up a new media query and adjust the design accordingly.
To figure out how large your browser window actually is, I can recommend Chrome Developer Tools or this Firefox plugin.
Copy the code above, adjust the max-width declaration of the media query and then input whatever CSS changes you need to implement.
Be sure to add new media queries at the bottom of the stylesheet but above the existing one.
Since CSS styles further below overwrite styles above them, it’s important that media queries move from larger to smaller screen sizes.
Ideally, you should end up with about 3-5 major break points and a page that shows a legible and attractive layout at every window size where all site elements stay intact throughout.
It will take a bit of trial and error but you will get it done, I’m sure.
4. Create A Mobile Menu
Creating a responsive menu can be one of the trickiest parts, especially if you want it to be collapsible.
However, you will be happy to hear that in that case you have a number of tutorials and WordPress plugins at your disposal to help you out:
However, one of the easiest ways to create a menu that is also usable on mobile devices is to set its dimensions from fixed to fluid. That way, when space gets sparse, the menu will just fold in on itself.