Media queries – Correct display issues on smaller devices with CSS

Media queries – Correct display issues on smaller devices with CSS media queries

 

Media queries. Here’s a short video we’ve put together about correcting problems that may arise when viewing a website on mobile devices. Occasionally when you build a website and view it on a desktop it looks great, but when you view it on a mobile device such as a tablet, or a phone some things look out of place. This can be really frustrating not only for you but for your customer, and as I’m sure you are aware, if your customer cannot see or access your site properly, then they will surely go elsewhere never to return. That’s one surefire way of losing customers.
media queriesIn this video we going to address those issues with some CSS media queries. Media queries are fantastic for correcting display errors on smaller devices, they let you arrange things in the display according to the viewing devices display size. In this video will using a WordPress theme it’s called Divi. Divi is an awesome theme, I use it on so many WordPress projects because it’s so versatile. The media queries that we show you in this video will also work with any WordPress theme if you place it in a custom CSS folder, you may have to create a child theme on your WordPress site if you use custom CSS. It will also work with any HTML site if you put it in your custom style sheet. And of course it’ll work on all bootstrap websites if you put it in their custom style sheet also.
We are primarily dealing with just the navbar area in this video, but media queries can be applied to any element on a website that may need adjusting on smaller devices. We have also included a PDF of the code used in this video that you may customize and use for your own needs if you want to. So watch the video and correct any problems you may have in your websites. Happy coding!

DOWNLOAD THE CODE USED IN THIS VIDEO: CLICK HERE

Trackbacks & Pings

Leave a Reply

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

Subscribe To Our Newsletter

Join the System 22 mailing list to receive the latest tech tips, deals and updates from our team.

We will never spam or share your email!

You have Successfully Subscribed!

Pin It on Pinterest