Media queries – Correct display issues on smaller devices with CSS

by | Jul 28, 2017 | Bootstrap, Web Design

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!


Subscribe To Our YouTube Channel

4.5 million views on youtube

Learn Bootstrap

Bootstrap (no coding) Build Bootstrap Websites the Easy Way! rating

Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder

Pin It on Pinterest

Share This