A Stepwise Approach To Create A Responsive Layout For Your WordPress Site


For the past few years, the demand for responsive design is increasing at a steady rate. And now, after the release of Google’s new mobile-friendly update, having a responsive layout that can be accessed easily on mobile devices has become a necessity than just a trend.

Do you want to create a mobile-friendly blog or website but don’t know where to start? If that’s the case, then choosing the WordPress platform best suits your needs.

With the advancement in the mobile technology, every Android or iPhone application development service provider are building cutting edge apps in the market with each passing day. This has brought a revolutionary change in the users’ behavior and ways they access the web or mobile. Fortunately, WordPress themes are designed in a manner to work well across all of the major devices.

create a responsive-layout

But, what if your WordPress site doesn’t feature a responsive layout? It’s obvious, you’ll need to transform your existing website layout into a responsive one. In this post, we’ll talk about some of the best techniques and resources, you can refer to when creating a responsive design. In addition, we’ll discuss about several tools for building mobile-friendly WordPress sites.

Best Techniques to Create Responsive Layouts

Here we’ll talk about some of the common practices used to build responsive designs, you can consider when designing a responsive layout for your WordPress site.



1- Media Queries: When you’ll install any WordPress theme, you’ll get access to a stylesheet that can be used both in desktop as well as mobile versions of your website. However, you will need to determine how certain screen sizes would not be the same as your default stylesheet.

In essence, you’ll be required to specify the maximum width of the default style using the following line of code:

@media screen and (max-width: 320px)

This code will apply different styles when the screen size of a device will have a width of 320 pixels. Apart from the 320 pixels, you can also use screen sizes of: 480 px, 780 px and 1024 px.

2- Making Images Responsive: Even though, you’ve created a good responsive design, it won’t be truly responsive if the images are too small or big compared to the containers. And so, you’ll need to make the images responsive or feature a fluid layout. For this purpose, simply add the below given code to your CSS:

body img {

max-width: 100%;,br />


The above code will ensure that the images in your design will load according to the device – it is being viewed on.

3- Adjust Your Text: Often when you’re working with a small-size layout using a device with a small screen, your text might look very big. In that case, you’ll need to adjust the size of your text to match the screen size, using the following code:

body {

font-size: 40%;

line-height: 1.2em;


4- Fix Your Navigation: There are many different ways to make your website navigation responsive. One best way to do so, is to use a drop-down box rather than a standard navigation bar. Another alternative is to let you navigation cover the entire page of your website (just like an app).

Useful Resources For Creating Responsive Layouts

In this section, we’ll have a quick overview of remarkably useful resources that will serve as a good starting point for designing responsively:

Smashing Magazine: “Responsive Web Design: What Is It and How to Use It,” an article published on Smashing Magazine covers all of the important concepts and techniques of a responsive design.

Sitepoint: “Common Techniques in Responsive Web Design”, an article on Sitepoint throw light upon some of the common techniques used for creating responsive layouts.

Bootstrap from Twitter: Bootstrap is a popular front-end framework introduced by Twitter which includes modern web technologies such as HTML, CSS, and JavaScript – that helps make the process of creating responsive layouts faster and easier.

Errnio: The Gesture and Interaction Engagement solution from errnio adds a new engagement layer to your site and enables several gesture based actions to be added to any mobile browsing session. This tool enhances user experience, engaging your visitors with your content on mobile. This simple addition to a mobile site create much more enhanced interactions on every tap, swipe, scroll or zoom of a user in the site. Even more, it makes sure to offer your content on each interaction, which ensures more page views and circulation on the site. The entire code is simple plug-and-play, indexing your content and serving it automatically, while you’re left with fun stuff like picking colour theme to match your site.

Tools to Provide a Mobile View of Your WordPress Site

You can find plenty of WordPress plugins that help provide a mobile view of your website when it is accessed by a mobile user. If you don’t want to change your current WordPress theme, but at the same time don’t want your users to have a bad experience when viewing your site on a mobile device (like Android, iPhone or any other), then plugins will prove a viable solution for you.

Below is the list of 3 most popular WordPress plugins that helps provide optimal website experience to mobile users:

WP Mobile Edition: This plugin serves as the complete toolkit that helps mobilize a WordPress website. It comes with a mobile switcher that auto-detects if your site is being accessed by a mobile user or not, and accordingly enables a mobile theme.

WPTouch: Considered as one of the most popular mobile solution, this plugin automatically loads a suitable mobile theme for your mobile users.

WP Mobile Detector Mobile Plugin: It detects the device used for accessing your site, and enables a compatible theme for that device.

Let’s Wrap Up!

Are you seeking out ways to turn your current WordPress website layout into a responsive one? Then, the techniques, resources and tools covered in this post will help you proceed with your project in the right direction.

You Might Also Like