Mobile browsing is becoming more popular every year, and it is already well on its way to overtaking traditional desktop browsing. However, a lot of websites still don’t offer an optimal browsing experience on the smaller screens and lower resolutions of mobile devices such as typical tablet computers and smartphones. While some Web designers have a completely separate version of their website which loads automatically when a mobile browser is detected, a far easier and more reliable way to make your website more mobile-friendly is simply to use responsive design techniques. This way, the website automatically scales to the size of the screen or window it is being displayed in.
1 – Responsive Themes in WordPress
There are hundreds of themes available for WordPress, many of which include extensive customization options without requiring the user to get involved with any complicated coding. Among the themes in the database are many responsive themes designed with mobile as well as desktop users in mind. By far the easiest and quickest way to make your WordPress website more mobile-friendly is to use such a theme.
- In your administrator dashboard, navigate to Appearance > Themes.
- Click “Add New” to search for new themes for your blog.
- Scroll down the list of features to find the section entitled “Layout”. Ensure that “Responsive Layout” is checked.
- Click “Find Themes” to view a list of responsive themes, and install the one of your choice. At the time of writing, there were 265 responsive themes available through the WordPress administrator dashboard alone, including the official themes from wordpress.org.
2 – Using CSS Media Queries
If you are not willing to change your theme, yet your currently activated theme is not a responsive one, you will need to edit the CSS style sheet for that theme to include some CSS media queries.
- Navigate to Appearance > Editor and scroll down the column to the right to find the style.css file. Open it to continue.
- Edit the file to include the media queries you want. These media queries will tell the browser to rearrange of remove certain elements of the webpage depending on the size of the window or screen that it is displayed in. Many themes have a section dedicated to media queries. In the default WordPress theme, Twenty Fourteen, for example, you will find this under the heading “11.0 Media Queries”.
- CSS media queries start with the @media screen operator followed by the width of the screen or window in pixels for which the entries in that section will apply. For example, in the following lines of code, the sidebar of your blog will not appear if the screen or window size is narrower than 320 pixels: @media screen and (max-width:320px) { #sidebar { display: none;} } You should be able to find the names of other on-page elements, such as #sidebar in your style.css file.
