Are you looking to configure Divi breakpoints and media queries? If you do, then you’re in the right place.
Almost every site on the internet is responsive. And why not? Google clearly defines the need for responsive sites to rank. Moreover, responsive sites improve user experience among visitors using different device sizes, including mobile, tablet, or laptop. Moreover, if you look at statistics, more than 60% of traffic comes from smartphones and tablets.
If you’re using the Divi theme, you’re already set, as it is responsive. It uses fluid grid layouts and media queries to provide responsiveness. In most cases, it is plug-and-play. However, in some cases, you may want to configure or change the settings to suit your visitors’ device choices.
In this post, we’ll go through a complete guide on how you can configure and change Divi breakpoints and media queries. We’ll use CSS to update media queries. For Divi breakpoints, we can use the in-build Divi settings.
What are Divi breakpoints, and How to configure them?
In responsive design, breakpoints define the pixel width threshold, determining when the website content changes based on the visitor’s screen sizes. Divi supports breakpoints for currently three device types or screen sizes, including mobile, tablets, and desktops. By default, Divi themes have three breakpoints. These include:
- Desktop: screen size greater than 981 pixels.
- Tablet: screen size greater than 768 pixels but less than 980 pixels.
- Mobile: screen size less than 768 pixels
Adjusting Divi breakpoints
Divi is highly customizable. It offers Divi Builder for fine-tuning every aspect of your Divi theme. To see your theme in action, you can use Theme Customizer. Open it up, and go to the bottom of the Theme Customizer sidebar. Here, you’ll find three device icons, one for desktop, one for tablet, and one for mobile.
Caption: Three device icons on Theme Customizer
Click on each one of them to see how the theme changes. Now, to tweak, you need to select the module. First, select the module’s design settings and click on the Blurb Module Settings. Now, select the Advanced Design setting and make the necessary changes.
For example, if you want to change the Header Font size, you need to select the header module and go to Advanced Design Settings. Now change the size according to your requirement.
Note: You need to make changes for each screen size. So, if you changed it for mobile, you must do it again for desktop and tablet size. So, you need to change every screen size.
Divi Builder lets you change settings for every aspect of your site, including columns, rows, modules, and sections. For example, you need to follow the steps below to change a particular screen size or Divi breakpoint.
- Go to the row, column, section, or module and select its setting.
- Now, it’ll open the responsive setting tab where you can find desktop, tablet, and mobile.
- From there, select the desired screen size you want to change.
- Make the changes and click on Save. Your new settings should apply.
What are media queries, and how to configure them?
Media queries take care of the media types’ specifications and rules based on breakpoints. To configure media queries, you need to use CSS. Just like breakpoints, you can also configure/change media queries.
But do you need to change them? The default responsive design tools are sufficient for most users and provide enough reconfigurability. However, you need to use media queries if you want finer control.
Furthermore, adding media queries is simple. All you need to do is add custom CSS to your site’s child theme. You can also add custom CSS through Theme Options.
Depending on your requirement, the following code should give you a good idea of how to configure media queries.
/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1300px) {
/* ADD YOUR CSS RULES HERE</strong> */
}
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1000px) and (max-width: 1300px) {
<strong>ADD YOUR CSS RULES HERE</strong>
}
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 999px) {
/* ADD YOUR CSS RULES HERE</strong> */
}
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 700px) and (max-width: 999px) {
/* ADD YOUR CSS RULES HERE</strong> */
}
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 669px) {
/* ADD YOUR CSS RULES HERE</strong> */
}
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
/* ADD YOUR CSS RULES HERE</strong> */
}
As you can see in the code, you added CSS code for specific breakpoints. For example, you can change text color or size.
Final Thoughts
Aiming to perfect your website’s design is a great initiative to improve user experience. For example, Divi lets you customize breakpoints easily. However, changing these settings is not easy and should be done carefully. If you’re unsure how to approach it even after reading the topic, we suggest hiring a professional to do it for you.
So, are you doing it yourself or hiring a professional to work with Divi breakpoints and media queries? Comment below and let us know.
