Optimizing your website's design for different devices is essential for providing a seamless user experience.
In this article, we will guide you through the process of applying device-specific custom CSS code to elements in Divi using media queries.
Note: Divi's Responsive Settings should be used each time you want to make device-specific changes in how an element is displayed on a Desktop, Tablet, or Phone.
However, there could be cases where you need to add your own custom CSS Code to style a specific element the way you want. Custom CSS codes can be used for those cases, and CSS Media Queries can be used to target specific devices.
The Web industry provides the following media queries as starting points:
For Desktop Devices:
@media (min-width: 1025px){}For Tablets in Landscape mode
@media (min-width: 981px) and (max-width: 1024px){}For Tablets in Portrait mode:
@media (min-width: 768px) and (max-width: 980px){}For Phones in Landscape mode
@media (min-width: 481px) and (max-width: 767px){}For Phones in Portrait mode
@media (max-width: 480px){}
However, you can write a media query for any device size you want. You can check the Using Media Queries MDM official documentation for more information.
Real-world example
Let's assume the following example where inside a Text module, there is the following element:
H1 element - for the Title
The requirements of this example are:
On the Desktop devices, the H1 should be 90px
On the Tablets while in landscape mode, the text size for the H1 should be 70px
On the Tablets while in portrait mode, the text size for the H1 should be 50px
On the Phones while in landscape mode, the text size for the H1 should be 30px
On the Phones while in landscape mode, the text size for the H1 should be 18px
The solution
Open the Text module settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS
Write the CSS code using the Media Query for each device:
@media (min-width: 1025px) {
selector h1 {
font-size: 90px
}
}
@media (min-width: 981px) and (max-width: 1024px) {
selector h1 {
font-size: 70px
}
}
@media (min-width: 768px) and (max-width: 980px) {
selector h1 {
font-size: 50px
}
}
@media (min-width: 481px) and (max-width: 767px) {
selector h1 {
font-size: 30px
}
}
@media (max-width: 480px) {
selector h1 {
font-size: 18px
}
}
Notes:
Custom Media Queries can also be used in Divi → Theme Options → General Tab → Custom CSS. However, adding/writing CSS code in Divi → Theme Options → General Tab → Custom CSS requires the element's selector to which you want a custom CSS code to apply.
For more details, check the How to Optimize Divi Elements for Desktop, Tablet, and Phone Devices article.