Checking Your Website Responsiveness

Testing Media Queries responsive CSS code

How to test for mobile on PC and Mac
Generally, for mobile screen testing, you'll simply be making your browser window more narrow to see how the webpage responds as the screen width becomes smaller. You can do these checks off-line. Follow these steps:

1. IE9+ or the Firefox and Safari browsers work best for this test because they can become more narrow then some other browsers.
2. Check the gauge bar above on this page. Make your browser width 320 pixels wide by lining up the "320 mobile" until the white line just disappears.
3. Open the folder with your HTML webpages. Drag the page you want to test into the narrow browser. You should not see a horizontal scrollbar at the bottom of your browser (if you do, see "advanced testing" below first).

• Results: As you make your browser width narrow, the Media Queries and other responsive css code should alter your styles. If you are seeing a horizontal scrollbar it may mean an error in your css code, or you may have added an element like an image or table that is wider than the 320 pixels your website should respond down to.
• The gauge above on this page allows you to see how your webpages look on smartphone portrait (320), smartphone landscape (480), and tablet portrait (768). Tablet landscape is 1024 but is not shown in the above bar.
• Note: These are some common resolutions. Some devices may not use these exact pixel dimensions.
• Note: Some responsive designs make elements larger and can not be tested using the above method. See "advanced testing" below.
• See sections below for solutions.

Keeping the site responsive for mobile
See editing responsive and mobile templates for some tips on how to edit this style of website code and keep the webpages compliant.


Google mobile tests
Once uploaded, check your website using the Google Mobile Friendly Test and make sure your website passes. To check your site for problems, use Pagespeed Insights.


Common errors:

• You have added an image that is not responsive. See responsive image support.
• You have added a wide page element. See responsive help.
• You are using the wrong selector. See "Notes" on the MQs help page.
• For the CSS class you are using, the HTML page element the class is on does not directly contain the text you want to alter.
• Another class in one of the css files is overwriting your class.
• You did not alter the css enough to make it visibly change.
• The browser you are testing in is not CSS3 compliant.
• Your browser is not narrow enough to see the MQs take effect.
• There is a code error. See fixing errors.

Advanced testing. for different types of responsive
Some responsive webpages, rather than altering the styles so elements become smaller, may instead make fonts and buttons larger as the screen resolution narrows. This is adaptive responsive. In these cases you'll need to test using the following method.

To check your website or template to see if you do have this style, test your webpage as outlined above. If the fonts grow very large you most likely have this style of responsive design and should test using the following method.

Edit the css file that includes your MQs code. Near the top you should see "@media handheld" code with 3 or more widths usually 482 or 480 pixels. Edit these widths to a wide number for testing like 1500px. Then open your HTML pages in a web browser. Edit the 1500px back to the original numbers when you are done. Click visual below:



Note: Be sure to edit the original numbers back when you are done testing.