Responsive Design Divi: how to manage different screen sizes?

Many users ask me the question: how to optimize the Responsive Design Divi ?

I want to say: "It's a child's play" 😉

But to think about it, the options Divi's responsibility Don't look at me. They're here. But a little hidden...

In this article, I suggest you take a look at the Responsive Design at Divi in order better manage your screen sizes and obtain a fully customized website.

Note: Since August 2019, the responsible options for the Divi theme have been improved as shown in this video:

And since November 2020, new features have perfected the responsive design with Divi (see Article here), we will discuss it further in this article...

1 – Why optimize the Responsive Design of your Divi website?

With more 9.5 billion mobile devices in the world, you'd have to be crazy not to optimize the responsive design of its site, right?

This is a good reason for create a site that is as readable on tablet and mobile as on desktop !

Users are increasingly navigating from their mobile devices, whether during breaks or on public transport, and this is very important!

Your visitors may even discover your site via a mobile screen! It is therefore crucial that they have a good impression in order to return later to visit it from their computer.

Do you know how many visitors to your site come from mobile terminals?

You can check this from your data Google Analytics, tab Audience > Mobile > Overview.

For example, in 2019, 12.5% of the Divi Tip traffic came from mobiles and tablets.

This is a small percentage due to the theme: Divi tutorials are mainly used from desktops. That makes sense.

But if the theme of your site is ready, it is highly likely that the majority of your traffic comes from mobile screens. This is often the case with news sites or lifestyles...

Discover all the resources on responsive on the official blog of Elegant Themes.

2 - How can I avoid the problem of responding with Divi?

Before going further in this article where everything is explained about responsive design options, I would like to highlight one very important point: few are responsive errors with Divi if you use this tool in the right way.

What I mean by that is that I accompany many users every year and I was able to detect a common mistake: changes in margins in an untimely manner.

Of course, the Visual Builder is super well made, it allows you to make changes to WYSIWYG (What You See Is What You Get) which allows you to modify your layout in real time. But this has consequences: if you create a perfect layout (layout) for your screen, know what might not be on other screen sizes. And that's when the Responsive errors.

The current error is "shoot" on margins (margin or padding) "at sight" using your mouse. You then think that this is the best way to place this or that element in the desired place, but it's a big mistake! In this way, you may get negative margins or "mad" margins that will pose a problem on tablet or smartphone.

I'll give you my little secret, the one I give to all my clients or students: I never touch the margins (internal margins or external margins) except when I really need it! And most importantly, I never shoot them with the mouse as shown below:

I prefer to go through the options of each module I need to change the margins, via the tab Settings > Styles > Spacing. So I master the margins to pixel and it removes work afterwards.

In this way, you won't have any surprises or worries about other screen sizes.

If you use the Visual Builder in the way I advocate it (this one above) and you still encounter problems of responsive, you can continue this article where you will certainly find answers.

If, on the other hand, you have "drawn" the margins with your mouse, you can already check if the problems are resolved by putting the margins back to 0px. This is the first track to explore...

3 – Native Responsive Design Management in Divi

It may be necessary to clarify that the theme Divi is a responsive WordPress theme. Although this is the case for most WordPress themes today.

It is also for this reason that WordPress has had a great success.

The old HTML sites of the 2000s were dumped and inappropriate for a small screen reading. WordPress and its Responsible themes have offered site creators a quick and simple solution for adapt to all screen sizes.

However, today there are hundreds of screen sizes on the market. Which was not the case at first. There are Android screens, tablets, iPhones, etc. And with every new smartphone put on the market, we discover a new screen size... Again!

It is therefore likely that the site that you just realized with Divi today, displays some Responsive errors In a few months... Yes!

And maybe in a few days, when your boyfriend, that uses a smartphone out of behind the fagots, you will say: "the menu of your site is weird on my phone"...

You did check it out. all versions of your site with all the terminals you had in hand but you're not a phone store either.

Anyway. It comforts me in the idea that a site is never really perfect... The important thing is to make it evolve!

Exactly, Divi offers us lots of responsible options in various places, which we will discover below:

4 - Manage default font sizes for the entire site

The first of the things you can do to optimize the Responsive Design by Divi,it is to set the font size according to the size of the screens.

Divi offers this option in its customizer customization options:

1. Go to the tab Appearance > Personalize > Styles on Mobile.
2. Set the tablet view
3. The phone view
4. The "Mobile menu" tab allows only to set the color but in no case the font size.

For mobiles and tablets, you can act on:

• Height of section
• Height of the line
• Text body size
• Size of securities

The options stop there and do not allow to define a font size according to the H1, H2, H3, etc. tags. We'll handle this differently.

But in the meantime, you can already set the "default" here, in this tab, it does not cost anything

5 - Responsive Views in the Divi Builder

Another interesting feature: the simple option you have already noticed: Responsive views from the Divi Builder.

When you activate the Visual Builder on one of your pages, you can control the appearance of the design according to 3 screen sizes:

• Desktop
• Tablet
• Mobile

You can easily switch from one view to another by opening the small purple button at the bottom of the screen and clicking on the desired icon:

These display options only for checking visual rendering in the 3 versions. But here, you won't really control the various versions. I suggest you managing this type of response directly from Divi modules concerned.

You don't use Divi yet? Do you hesitate? Discover the theme Divi here !

6 - Responsive management directly in Divi modules

Unless you develop your site in "mobile first", the version you will develop first will be the desktop version. All sections, lines and modules of Divi that you insert into your layout will therefore be optimized for the desktop version.

The Divi CSS Embedded a style sheet to optimize, by default, mobile versions.

For example, if you insert a line 4/4 within a section, it will automatically pass 2/2 in tablet version and in 1/1 in mobile version. So on this side you have nothing to deal with with Divi.

However, where you need to pay particular attention, it is within your modules.

If you wish your site fits perfectly to different screen sizes, you will need to correct certain elements as you create your site.

You will therefore need to edit certain elements in order to make them fully compatible in "small screen" version...

6.1 – Making text responsive with Divi

The size of the titles and the body of the text are elements that deserve special attention.

Readability is an important criterion for improving user experience.

Here is how to change font size according to screen size:

• Edit the module that contains your text.
• On the mouse over the size of the text, you will see a small mobile icon
• Click on this icon...

• The 3 screen sizes appear as a tab.
• Select tab Tablet or tab Telephone to act on this size
• Set a pixel value according to the screen size.

Important: this small mobile icon allowing to act on the responsive is available in most of each option of each module.

Note, too, that there is another way to manage these font sizes once and for all: set the Publish Content module (Post Content Module) available in the Builder theme.

6.2 - Play on colors according to screen size

Since this responsive feature is available in almost every option in each module, you can also use it for other purposes. For example, you could set a different title color for each version of your site!

This works the same way as setting the size, except that you will act on the color.

In the above screenshot, you can see that I set:

• a black color for titles in desktop version
• a pink color for titles in tablet version
• a purple color for titles in mobile version

Note, however, that you will have to be careful to select the item you want to act on. In the example of this screenshot, you can see that I selected the Title H3 before defining its color.

This is just an example but you understand, there will be no more limit in terms of customization and optimization depending on screen sizes.

7 - Screen visibility condition

In some cases, you may decide to display some items on mobile and others on desktop... but not both. Good news, it's possible too!

This is often the case with a "call" button. It is only relevant on mobile (although some desktop may make calls).

Divi then allows you to set a visibility condition depending on the screens.

• Edit module to optimize
• Go to tab Advanced > Visibility
• Check which versions your item should not appear on. In the example above, I hid my call button on the versions Tablet and Office so that it is only available on the version telephone.
• Save.

The Responsive Design, it's not just Visual optimization Hey! It must also take into account optimization of user experience.

8 - Separate sections for each device? Not recommended!

With the visibility option that we have just seen, some users might be tempted to develop a section, or even a section. layout, different for each version, within the same page...

Ouch, don't do this!

You can use the visibility options sparingly, like a call button for example, but this should not go further, for various reasons:

• This is not optimal for SEO Even if these "hidden" sections are not visible to a human, Google robots will see them. They may not understand why the content is duplicated.
• With each update, you will need to modify all the section versions: what a waste of time!
• If you use CSS ID In order to create internal links within the same page, they will no longer work because an ID must be unique.
• This is a not very pro way of managing the Responsive Design Divi.

So, for all these reasons, prefer the native Divi options rather than the duplication of your sections depending on the size of the screens. And if this is not enough, that you still note errors of responsive, it is that the problem comes from the breaking point and Media Queries.

Note: a few years ago, I had published an article dealing with specific responsiveness concern with Divi and iOS. This article still seems relevant in some cases.

You can test Divi for free: go to this page and click on "TRY IT FOR FREE"

9 - Manage Divi Native Menu Responsive

Earlier in this article, I told you that "mobile icon" to optimize the responsive was available for most of the options in each module.

However, if you do not use the Theme Builder and that you use a site header Divi classic, with a navigation menu created from the Customizer (menu Appearance > Customize), these responsive optimization options are not available.

As you can see in the above capture, the text size of the menu does not offer options for mobile and tablet versions. So by default, all versions of your site will have a font of the same size for your main menu.

It is often for this reason that readers of Divi tips contact me by telling me "My Divi menu is not correct on mobile". Hey, yeah, we're gonna have to change that with CSS, the famous Media Queries…

10 – Options to preview Divi's responsive

Since November 2020, it is easier to see what your website will look like on different devices and screen sizes.

You can manually adjust the size of the preview, change the default preview widths of your phone and tablet and switch between presets of common devices.

This video summarizes the main features:

You can change the default view preview widths telephone and Tablet so that whenever you enter a preview mode, or whenever you switch between the responsive options, the size of your window reflects the desired width.

Change the size of your screens and simply click the button « Make default view » so that the next time you switch to this display mode, your custom preview size will be reflected.

For more information, see the official article on the Divi Reactive Preview System.

11 - Improve Divi Breakpoint with Queries Media

Some WordPress themes allow to define the breaking points (the breakpoint), which allows really adapt the site design to current screen sizes. But Divi does not propose this option as a native.

The Divi CSS breakpoint (or Divi Breakpoint) and the Media Queries are closely related to Responsive Design.

If you wish to obtain a Divi site fully responsiveYou will have to go through these decisive steps.

Although Divi natively manages almost all of a responsive website – as we have seen throughout this article – it is possible that some elements of your layout are not yet fully optimized for all screen sizes...

You will then need to add some CSS to correct this. But don't panic! We're talking CSS and not Javascript or other complicated language! Let us say that the continuation of this article should help the novices to correct some Responsive bugs with Divi.

12 - What is Breakpoint or Stop Point?

When a WordPress theme is coded to be responsive, the developers of the theme define CSS rules that may be different depending on the size of the screens.

These CSS rules are therefore issued differently according to a pixel size. This is what we call Breakpoint or Breakpoint.

This breakpoint is therefore the transition from one screen size to another.

Once these breakpoints are defined, just use the Media Queries to issue rules per screen size.

The Divi theme would have 6 break points (as explained in this Official article) :

• Large office : 1405px and more
• Standard office: between 1100px and 1405px
• Laptops and large tablets: between 980px and 1100px
• Tablets: between 768px and 980px
• Smartphones and small tablets: between 320px and 768px
• Smartphones: between 320px and 480px

Responsive worries that you may sometimes encounter may come from one of these sizes. For example, the transition between the computer version and the tablet version is too early or too late.

To start with Divi, discover all the articles to start calmly!

13 - What is Queries Media?

The Media Queries are multimedia queries that can be used within CSS style sheets to define rules that will apply under certain conditions.

The Media Queries can affect printing, accessible contents intended for visual harms (braille...), small screens, large screen projections, TV projections etc.

But above all, Media Queries will serve mark certain screen sizes, regardless of destination, using the value ALL or SCREEN.

14 - The Media Queries principle for accurate management of Responsive Design

It's fine theory but let's go to practice... Here are 3 types of syntax Media Queries that will allow you to act on responsive design :

14.1 - Responsive design up to a certain screen size

Here is the syntax for CSS rules applicable up to a certain screen size:

@media screen and (max-width: 980px) {
Placez votre CSS ici
}

In this example, the CSS rules that will be used will apply on screens ranging from 0px to 980px.

It's the prefix max- which indicates the maximum size value. From 981px, the CSS rules issued here will no longer work.

Small variant:

@media all and (max-width: 980px) {
Placez votre CSS ici
}

In this snippet, the value ALL replaced the value SCREEN. This means that the rules will apply to all types of media (not just screens). In both cases, you will act on the responsive design of your Divi site. Value ALL will be wider than the value SCREEN.

14.2 - Responsive design from a certain screen size

Conversely, you can also use the Queries Media to act on the design from a certain screen size. In this case, here is the syntax:

@media screen and (min-width: 980px) {
Placez votre CSS ici
}

or

@media all and (min-width: 980px) {
Placez votre CSS ici
}

All CSS rules that you issue here will only apply to screens over 980px.

It's the prefix min- which allows define minimum value from which CSS rules will be taken into account by the browser.

14.3 - Responsive design between two screen sizes

Thanks to Media QueriesIt is also possible to issue CSS rules for a screen size between two values. Here is an example of syntax:

@media screen and (min-width: 980px) and (max-width: 1100px) {
Placez votre CSS ici
}

The CSS rules you will place here will only be taken into account for screens with a size between 980px and 1100px.

To go further with the Media Queries, I recommend this excellent Article d.

15 - How do I identify Divi's Queries Media?

You have now understood that Divi Breakpoints have been defined according to certain screen sizes and that Media Queries allow to act on...

You can group certain screen sizes and act globally on the responsive design of your Divi site, in two sizes:

/* Écrans de plus de 980px */
@media all and (min-width: 980px) {
  Placez votre CSS ici
}
 
/* Écrans de moins de 980px */
@media all and (max-width: 979px) {
 Placez votre CSS ici
}

But if you want to refine the display of certain elements of your site and be very precise in the size of the screens, you can use "Official" screen sizes identified earlier in this article, namely:

• Large office : 1405px and more
• Standard office: between 1100px and 1405px
• Laptops and large tablets: between 980px and 1100px
• Tablets: between 768px and 980px
• Smartphones and small tablets: between 320px and 768px
• Smartphones: between 320px and 480px

Here's a Divi Queries Media Dryproof Sheet according to these screen sizes:

/* Desktop de plus de 1405px */
@media all and (min-width: 1405px) {
  Placez votre CSS ici
}
 
/* Desktop compris entre 1100px et 1405px */
@media all and (min-width: 1100px) and (max-width: 1404px) {
  Placez votre CSS ici
}
 
/* Ordinateurs portables et grandes tablettes comprises entre 980px et 1100px */
@media all and (min-width: 980px) and (max-width: 1099px) {
  Placez votre CSS ici
}
 
/* Tablettes comprises entre 768px et 980px */
@media all and (min-width: 768px) and (max-width: 979px) {
 Placez votre CSS ici
}
 
/* Smartphones et petites tablettes comprises entre 320px et 768px */
@media all and (min-width: 320px) and (max-width: 767px) {
 Placez votre CSS ici
}
 
/* Petits Smartphones de moins de 480px */
@media all and (max-width: 479px) {
 Placez votre CSS ici
}

But this remains only theory and it is best to inspect your site using a browser (Firefox or Chrome) to define which break points pose a concern for responsiveness.

To understand better, I propose a concrete case...

Want to customize Divi as a pro? Discover all the tutorials!

16 - Concrete case: correct Divi's responsive menu

Most responsive design optimizations can be settled natively within Divi modules options to this effect, as explained in this article.

But sometimes some parts of the site may not respond positively to the passage from one screen to another. This can be due to the size of your font, the size of your logo, etc.

Part of the site that can be delicate is the Header. The header of your site may be suitable on mobile and desktop, but not on tablet. Of course, this is an example among so many others...

To better explain how to manage the different screen sizes and level to certain bugs, I propose a concrete example from a bug present on Divi...

16.1 - The browser inspector: your best ally!

Before you start anything, know that Inspector of your web browser favorite will become your best friend in looking for website more responsive !

If you read this sentence, you think I speak Chinese, don't worry! I too, a few years ago, did not know what a "inspector" was (except Colombo, LOL!).

So let's start from the beginning: you have a response problem on your Divi site ? Get together. your site and a web browser like Firefox or Chrome.

Make one right-click anywhere on the page of your site... Options are available to you:

• Examine the element : for Firefox
• Inspect : for Chrome

Cool! The code of the page appears in a window that looks pretty much like this:

Here, from here, we can start!

16.2 – Identify the size of the screen that poses a responsive problem

With the inspector of your favorite browser, you will be able to activate the option Responsive Design and check the screen sizes in pixel:

1. Open your website in Firefox or Chrome.
2. Make one right click, anywhere on your site (where the responsive bug exists).
3. Click "Review the element" or on "Inspect" depending on your browser.
4. Click Mobile/tablet icon, located to the right or left of the inspector's menu.
5. Drag the window to determine the Breakpoint by Divi and raise the size in pixel.

This video will explain how to identify the screen size to fix:

In this video, you certainly noted:

• Divi's mobile menu arrives as soon as the screen measures less than 980px.
• So the normal menu appears at 981px.
• Between 980px and 1160px, the menu is on 2 lines, the logo is outsized, the elements overlap.
• From 1160px the main menu of Divi becomes correct.

With these identified elements, it will be simple to correct the attention to responsive design on the main menu.

It will be necessary to modify the CSS rule that "says" that the mobile menu only occurs on screens of less than 980px. The idea is to increase this value so that the mobile menu occurs as soon as the screens are below 1160px.

16.3 - Correct Responsive with a new Media Querie

To issue a new CSS rule, you will need a Divi child theme or simply use the option adding native CSS :

• Go to tab Appearances > Customize > Additional CSS
• Enter the Media Querie that rewrites Divi's basic CSS rule. This new request must look like this:

/* Faire apparaitre le menu mobile jusqu'à 1160px */

@media all and (max-width: 1160px) {
 #et_mobile_nav_menu {
 display: block;
 }
 
#top-menu {
 display: none;
 }
}

This new rule orders: "Up to 1160px, displays the mobile menu and hides the normal menu". So, by default, beyond 1160px, the normal menu will be displayed.

Remember to click on « Publish » to save your changes.

However, a lot of other options could have been considered... For example: reduce the font of the menu and the size of the logo on screens between 980px and 1160px (size where the menu had a problem with responsiveness).

/* Corriger le responsive du menu pour les écrans compris entre 980px et 1160px */

@media all and (min-width: 980px) and (max-width: 1160px){
	
#logo {
    max-height: 40%;
}

#top-menu li a {
    font-size: 14px;
}

#et_search_icon {
    display: none;
}

.et-cart-info {
    display: none;
}
}

All these values are indicative because, of course, it depends on several criteria that will change depending on the sites:

• The size of the police,
• The police used,
• The size of the logo,
• And above all, the number of items that make up your menu.

So, the idea is not really to copy and paste the codes present on this article but rather to adapt them according to your needs.

17 - In conclusion: Responsive Design Divi, it's not so complicated!

I am very curious: did you know all these options of Responsive Design Divi ? And do you use Media Queries to correct certain CSS rules based on screen size?

In this article, you could see that it is quite easy to correct some responsive errors, simply with the native options of Divi. And if that's not enough, the Media Queries will come to your rescue...

Finally, I propose a reading list on the Management of Responsive under Divi :

• Make the parallax possible in mobile version!
• How to use Divi's custom CSS for advanced responsive editing
• Reactive and hover editing with Divi
• Using Divi's new height and width options to create a responsive design
• Divi Breakpoint and Media Queries.