Divi is a responsive theme that uses breakpoints and media queries to optimize your website to display on various screen sizes.
Your website will automatically display differently depending on which screen size the website is being viewed on.
For example, you can see in the image below how a 4-column row on a desktop will turn into two 2-column rows on a tablet and four 1-column rows on a mobile.
This is one of the built-in responsive features of Divi.
What are Divi breakpoints?
Divi breakpoints or CSS media query breakpoints are the pixel widths at which the website content changes for certain screen sizes.
By default, Divi comes with 3 built-in breakpoints that allow you to display content differently when viewed via a desktop, tablet, and mobile screen size.
The 3 Divi breakpoints are:
- For Desktop screen sizes of 981 pixels and above
- For Tablet screen sizes between 980 pixels and 768 pixels
- For Mobile screen sizes 767 pixels and below
Adjusting settings for different breakpoints
The built-in Divi breakpoints are easily utilized using the DIvi Builder as each setting for Divi sections, rows, columns, and modules can be changed individually to apply to desktops, tablets, and/or mobiles.
To make a setting apply to a particular Divi breakpoint or screen size you will need to;
- Hover over a setting in your section, row, column, or module and click on the small phone icon second from the left
- This will open up the responsive settings tab, displaying icons for desktop, tablet, and mobile. Select the desired screen size to target by clicking on its icon
- With the desired screen selected you can then make changes to the setting and save
- Your new settings will now only be applied when viewed on the screen size you selected
Top tip – You need to click the mobile icon for each setting individually. In the example above we are editing the Blurb module design settings. The responsive controls are open for the title text size setting where I have changed the title text size for mobiles to 29px. The responsive setting for mobile is only open for the title text size and not any other setting. Many people may then click into the title letter-spacing (or any other setting) and adjust its setting thinking it will also be targeting the mobile view, but it would be targeting all breakpoints and screen sizes. You must hover over each setting title and click the mobile icon.
What are Divi media queries?
Media queries are CSS rules that are applied to different media types/devices as specific by breakpoints.
Media queries are integrated as part of the Divi Builder so by using the built-in settings for desktop, tablet, and mobile you are using breakpoints and media queries.
Adding your own breakpoints and media queries to Divi
For the majority of DIvi users, the built-in responsive design tools will be more than enough to ensure your website displays satisfactorily on the majority of devices.
But, if you need to have more control to ensure your site is pixel perfect for a specific device then you can add your own breakpoints and media queries via your CSS stylesheet.
To add your own media queries to Divi you will need to add some custom CSS to your child themes stylesheet or the custom CSS box in your Theme Options
Whilst you can target any screen size, resolution, or orientation using the @media rule, the most common media queries would include;
/*** Responsive Styles Large Desktop And Above ***/ @media all and (min-width: 1405px) { <strong>ADD YOUR CSS RULES HERE</strong> } /*** Responsive Styles Standard Desktop Only ***/ @media all and (min-width: 1100px) and (max-width: 1405px) { <strong>ADD YOUR CSS RULES HERE</strong> } /*** Responsive Styles Tablet And Below ***/ @media all and (max-width: 980px) { <strong>ADD YOUR CSS RULES HERE</strong> } /*** Responsive Styles Tablet Only ***/ @media all and (min-width: 768px) and (max-width: 980px) { <strong>ADD YOUR CSS RULES HERE</strong> } /*** Responsive Styles Smartphone Only ***/ @media all and (max-width: 767px) { <strong>ADD YOUR CSS RULES HERE</strong> } /*** Responsive Styles Smartphone Portrait ***/ @media all and (max-width: 479px) { <strong>ADD YOUR CSS RULES HERE</strong> }
So, for example, if you wanted to change all h1 text on large desktops to be 40px you could add the following code into your CSS stylesheet;
/*** Responsive Styles Large Desktop And Above ***/ @media all and (min-width: 1405px) { h1 { font-size: 40px; } }
Final thoughts
Most of the websites I build are not overly optimized for various screen sizes beyond what Divi does out-of-the-box. I occasionally use the built-in responsive design controls within the Divi modules but am yet to find the need to create my own media queries and breakpoints. Most of the target audiences for my websites are using desktops so tablets and mobiles are not overly important to me or my users. Obviously, each website is different and having the built-in options to restyle your site with built-in controls is hugely useful.
Do you use the built-in options to change styles for desktops, tablets, and mobiles? Have you ever created your own media queries?
thanks. that makes sense. I will stick to the built-in breakpoints and responsiveness for now.
easier that way and won’t make much difference to most.
I am the same. Stick with the built-in options for almost every website I make
What I have been looking for is the basic css that would change the break points globally on a divi site? With the high resolution of tablets, 980px is too low for a two column Divi layou (It just squishes the two together without snapping to a single column on a larger iPad for example). Is there a way in the customize CSS panel to override the DIVI breakpoint for tablet of 980 to maybe 1080px? Thank you.
Did you ever find a solution ?
i need to change the tablet/desktop breakpoint as well…
I’ve spent 20 horrible hours trying to make a website-wide change to Divi’s media queries… I’m going to burn out my PC
I’ve been using iPads for years, and find Divi’s default tablet breakpoint to be useless. Ironically this very page has a problem on iPad. The menu at the top has been squeezed to create text overlaps.
yes, i did notice this but my tablet traffic is so small fixing it is way down the list.
Problem is 4k and 5k screens are getting more popular and can make a site look very spaced out!
yes, you need to decide what sort of screens your users will be using. for this site 10% are on 2560×1440 but the other 90% are on 1920 or less.