Today we’ll be looking at how to make more responsive themes. In my previous post in the series, we looked at five things every WordPress theme needs. And one of them involves responsiveness.
When making a theme, one important thing to look out for is responsiveness, If you’re using a large screen then design with small screens in your mind and vice versa.
To make a responsive page the first thing to do is set the viewport, this resizes the page to the actual screen size. To add use
<meta name="viewport" content="width:device-width, initial-scale:1">
Add this between the <head></head> tag.
Next, we need to make our element sizes responsive, so when setting sizes use more responsive units like em, % this unit sizes the element according to the screen size which gives us more responsiveness.
Next all container elements i.e
img, div, table should have a max-width, that sets the maximum width to the width of their container, meaning it doesn’t go outside their containers.
An easier and faster method to make responsive designs is using frameworks, the most popular is Bootstrap (learn bootstrap here). Bootstrap offers more responsiveness to your design and it’s easier to use.
Was this tutorial helpful? If yes you can share it with your friends and drop a comment below. Don’t forget to subscribe to get more helpful posts to guide you as you make your next theme.