How to Make Your WordPress Site Mobile-Friendly

Mobile shopping is gaining popularity every year and is on track to surpass traditional desktop shopping. However, many websites still do not provide an optimal shopping experience on smaller screens and lower resolutions of mobile devices such as tablets and smartphones. While some web designers have a separate version of their site for mobile browsers, a simpler and more reliable way to make your site mobile-friendly is to use responsive design techniques. This way, the site automatically adjusts to the size of the screen or window it is being displayed on.

1 – WordPress Responsive Themes

There are numerous themes available for WordPress, many of which offer extensive customization options without requiring complex coding. Among the themes in the database, there are many responsive themes designed for both mobile and desktop users. The easiest and quickest way to make your WordPress site more mobile-friendly is to use such a theme.

1. In your admin dashboard, go to Appearance > Themes.
2. Click on “Add New” to search for new themes for your blog.
3. Scroll down the list of features and find the section titled “Layout”. Make sure “Responsive Layout” is selected.
4. Click on “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 admin dashboard alone, including the official themes from wordpress.org.
   

2 – Using CSS Media Queries

If you are not willing to change your theme but your current theme is not responsive, you will need to edit the CSS style sheet for that theme to include some CSS media queries.

1. Go to Appearance > Editor and scroll down the column on the right to find the style.css file. Open it to proceed.
2. Edit the file to add the media queries you want. These media queries will instruct the browser to rearrange or remove certain elements of the webpage based on the size of the window or screen it is displayed on. Many themes have a section dedicated to media queries. In the default WordPress theme, Twenty Fourteen, for example, you can find this under the heading “11.0 Media Queries”.
3. CSS media queries start with the @media screen operator followed by the width of the screen or window in pixels for which the styles in that section will apply. For example, in the following code snippet, 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.