Divi Media Queries

by | May 8, 2018 | Divi Theme Code Snippets | 0 comments

Just so that I never lose these

The general ranges of width for each device are as follows:

Large Desktop: 1405px and above
Standard Desktop: between 1100px and 1405px
Laptops and Large Tablets: between 980px and 1100px
Tablets: between 768px and 980px
Smartphones and small Tablets: between 320px and 768px;
Smartphones: between 320px and 480px;

Here is a list of the main media queries used in the Divi Theme. You can use this as a helpful template for your custom CSS.

Kudos to the original blog post by Elegant Themes https://www.elegantthemes.com/blog/divi-resources/how-to-identify-divis-responsive-breakpoints-and-fine-tune-your-designs-with-media-queries

All the css code is shown below
/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {

Let’s connect

Get in Touch with me easily using the methods below

©Copyright  George Nicoalou 2021 |  Disclaimer  |  Site Map

WP Feedback

Dive straight into the feedback!
Login below and you can start commenting using your own user instantly

Pin It on Pinterest

Share This
Divi Theme Code SnippetsDivi Media Queries