How to fix responsive layout issues in WordPress

Last Updated on: 30th October 2016, 10:25 pm

Responsive layout is an important factor for your website. In order to be able to fix an issue you first must be certain that this is happening to every visitor and not just you. Most people use their own phone for testing which is fine, but if you are collaborating with somebody else to help you fix an issue in your responsive layout you require common testing ground. A browser based testing tool also rules out any local issue on your phone.

Use WordPress customizer or similar browser tool to test

The quickest way to test your responsive layout is provided by the WordPress customizer. Have a look:

GIF

Too small? View full size GIF in new tab

I use Responsinator for extended testing.

Apply CSS for mobile views only

Once you have found the right CSS class to target you need to enter your custom CSS in a way that it targets the correct mobile view.

Mobile views are triggered by CSS breakpoints and require media queries.

You can either enter the correct CSS with a media query manually into a custom CSS field or use a plugin to facilitate this. I like using Responsive CSS Editor.

I hope this information helps you to fix your responsive layout issue.

Leave a Reply

Your email address will not be published. Required fields are marked *

Con Schneider