How to Apply Device-Specific Custom CSS Code to an Element in Divi

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
  }
}

Divi - Example of custom media query CSS code

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.

How to Optimize Divi Layouts for Mobile Devices

How to Hide Menu Items on Desktop or Mobile Devices

How to Add Custom CSS Code to a Specific Page or Custom Post Type

How to Enable or Disable the Back to Top Button Based on Device

How to Customize the Menu Module's Responsive Breakpoints