Often we need to adapt our CSS customizations to the different device sizes, and it is very helpful to have the media query breakpoints of the DIVI Theme at hand. Artiom from Elegant Themes was revealing this handy list:
- 479px and lower: for mobiles
- 480px – 767px: for mobiles
- 768px – 980px: for portrait tablets
- 981px – 1100px: for landscape tablets
- 1101px – 1405px: for desktops
- 1405px and above: for large desktops
The most important points sit at max-width 768px for mobiles and 1101px für tablets, it is the points at which the responsive settings in each module act. Another clear point is 981px where the sidebar moves below the content and the menu is turning mobile. If you want to move this point, so your individual menu collapses only short before it crushes into your logo, check this post.
And here a CSS code you can copy and use right away:
|
1 2 3 4 5 |
/* Breakpoints */ @media ( max-width: 1101px ) { } @media ( max-width: 768px ) { } |
