Divi Tips n°90 responsive design

Responsive Design Divi: how to handle different screen sizes?

Updated on 02/01/2021 | Published on 17/02/2020 | 79 commentaires

4,904 words

20

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

I feel like answering: "it's a piece of cake" 😉

But when you think about it, Divi's responsive options are not obvious. They are there... but a bit hidden...

In this article, I propose to give you an overview of the Responsive Design within Divi in order to better manage your screen sizes and get a fully customized website.

Note: as of August 2019, the Divi theme's responsive options have been improved as demonstrated in this video:

Voir l’article officiel ici.

And since November 2020, new features have been added to the responsive design with Divi (see the article here), which we will discuss later in this article...

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Why optimize the Responsive Design of your Divi site?

With more than 9.5 billion mobile devices in the world, you'd have to be crazy not to optimise the responsive design of your site, wouldn't you?

This is a good reason to create a site that is as readable on tablets and mobiles as on the desktop!

Users are increasingly browsing from their mobile phones, whether during their 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 so that they will come back to visit it later from their computer.

Do you know what proportion of your site visitors come from mobile devices?

You can check this from your data Google AnalyticsYou can find this information in the Audience > Mobile > Overview tab.

Trafic desktop / mobile / tablette
Desktop / mobile / tablet traffic in 2019 on Divi Tips

For example, in 2019, 12.5% of Divi Tips traffic came from mobile and tablets.

This is a small percentage due to the theme: my Divi tutorials are mainly used from desktops. This is quite logical.

But if the theme of your site lends itself to it, it is highly likely that the majority of your traffic comes from mobile screens. This is often the case for news or lifestyle sites...

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

2 - How to avoid responsive issues with Divi?

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

What I mean by this is that I accompany many users every year and I have been able to detect a common error: the modification of margins in an untimely manner.

Of course, the Visual Builder is great, it allows you to make changes in WYSIWYG (What You See Is What You Get) which allows you to change your layout in real time. But this has consequences: if you create a perfect layout for your screen, you should know that it may not be perfect for other screen sizes. And that's when responsive errors happen.

A common mistake is to "drag" the margins (margin or padding) "at a glance" with your mouse. You may think that this is the best way to place this or that element in the desired place, but this is a big mistake! In this way, you risk getting negative or "crazy" margins that will be a problem on a tablet or smartphone.

I'll tell you my little secret, the one I give to all my clients or students: I never touch the margins (internal or external margins) except when I really need them! And above all, I never "pull" them with the mouse as I show you below:

ne pas tirer les marge du Divi Builder

I prefer to go through the options of each module I need to change the margins, via the tab Settings > Styles > Spacing. This way, I can control the margins to the nearest pixel and it saves me work afterwards.

Définir les marges au pixel près

This way, you won't have any surprises or concerns about other screen sizes.

If you are using the Visual Builder in the way I recommend (the one above) and you still have responsive issues, you can continue with this article where you will certainly find some answers.

If, on the other hand, you have "pulled" the margins with your mouse, you can already check whether the problems are solved by resetting the margins to 0px. This is the first avenue to explore...

3 - Native Responsive Design support in Divi

It is perhaps necessary to point out that the Divi theme is a responsive WordPress theme. Although this is the case with most WordPress themes today.

This is also why WordPress has been so successful.

The old HTML sites of the 2000s were outdated and unsuitable for small screen viewing. WordPress and its responsive themes offered site builders a quick and easy way to adapt to all screen sizes.

However, nowadays there are hundreds of screen sizes on the market. This was not the case in the beginning. There are Android screens, tablets, iPhones, etc. And with every new smartphone that comes on the market, there is a new screen size... Again!

It is therefore likely that the site you have just created with Divi today, will show some responsive errors in a few months... Yes!

And maybe even in a few days, when your friend, who uses a smartphone out of the blue, will say to you: "the menu of your site is weird on my phone"...

You did check all the versions of your site with all the terminals you had at hand, but you are not a phone shop either 🙂

In short, it reinforces my idea that a site is never really perfect. This reinforces my idea that a site is never really perfect... The important thing is to make it evolve!

Divi offers us a lot of responsive options in various places, which we will discover below:

4 - Manage default font sizes for the entire site

The first thing you can do to optimize Divi's Responsive Design is to set the font size to match the screen size.

Divi offers this option in its customizer options:

Tailles de police en fonction de la taille des écrans Divi
Manage font sizes based on Divi screen sizes directly from the Appearance > Customize > Mobile Styles tab
  1. Go to the Appearance > Customise > Styles on Mobile tab.
  2. Set up the tablet view
  3. The telephone view
  4. The "menu on mobile" tab only allows you to set the colour but not the font size.

For mobiles and tablets, you will be able to act on :

  • The height of the section
  • The height of the line
  • The size of the body text
  • The size of the titles

The options stop there and do not allow you to define a font size according to the H1, H2, H3 tags, etc. This will be handled differently.

But in the meantime, you can already set the "default" here, in this tab, it doesn't cost anything 😉 ... Then, you will refine.

5 - Responsive views in the Divi Builder

Another interesting feature is the simple option you've 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:

Divi - vue desktop
Divi - desktop view
Divi - vue tablette
Divi - tablet view
Divi - vue mobile
Divi - mobile view display

These display options are only used to check the visual rendering in the 3 versions. But here you will not really control the various versions. Instead, I advise you to manage this type of responsive directly from the Divi modules concerned.

Not using Divi yet? Not sure? Discover the Divi theme here !

6 - Managing responsive directly in Divi modules

Unless you are developing your site in "mobile first", the version you develop first will be the desktop version. All Divi sections, rows and modules that you insert into your layout will be optimised for the desktop version.

The CSS of Divi includes a style sheet that optimises mobile versions by default.

For example, if you insert a 4/4 line within a section, it will automatically change to 2/2 in the tablet version and 1/1 in the mobile version. So you don't have to manage anything with Divi.

ligne 4/4
This section displays a "4/4 line" in the desktop version
grille pour version mobile
In tablet and mobile versions, this section displays in 2/2 and then in 1/1 depending on the screen size.

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

If you want your site to fit perfectly on different screen sizes, you will have to correct some elements as you create your site.

You will therefore have to edit some elements to make them fully compatible in the "small screen" version...

6.1 - Making text responsive with Divi

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

Readability is an important criterion for improving the user experience.

Here's how to change the font size to suit the screen size:

gérer la taille du texte responsive
Easily manage responsive text size with Divi's options
  • Edit the module that contains your text.
  • When you hover the mouse over the text size, you will see a small mobile icon
  • Click on this icon...
Définir taille du texte en responsive design
Set the text size to fit the screen size
  • The 3 screen sizes appear as a tab.
  • Select the Tablet tab or the Phone tab to act on this size
  • Set a pixel value according to the size of the screens.

Important: this little mobile icon 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 theme builder.

6.2 - Playing with colours according to screen size

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

This works in the same way as setting the size, except that you act on the colour.

couleur en fonction des tailles d'écran
Use the responsive versions to get a different colour for different screen sizes for example!

In the screenshot above, you can see that I have defined :

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

Note, however, that you must be careful to select the element you wish to act on. In the example of this screenshot, you can see that I have selected Title H3 before setting its colour.

This is just an example, but as you can see, there will be no limits to customisation and optimisation for different screen sizes.

7 - Visibility conditions according to the screens

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

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

bouton appeler pour mobile uniquement
Button to initiate a call

Divi then allows you to define a visibility condition according to the screens.

désactiver bouton appel sur desktop
Disable call button on desktop and tablet
  • Edit the module to be optimised
  • Go to the tab Advanced > Visibility
  • Check the versions on which your item should not appear. In the example above, I have hidden my call button on both the tablet and desktop versions so that it is only available on the phone version.
  • Save.

Responsive design is not just about visual optimisation! It must also take into account the optimisation of the user experience.

8 - Separate sections for each device? Not recommended!

With the visibility option discussed above, some users may be tempted to develop a section, or even a layoutdifferent for each version, and this, within the same page...

Ouch, don't do that!

You can use the visibility options sparingly, as for a call button for example, but it 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's robots will see them. They may not understand why the content is duplicated.
  • Each time you update, you will have to change all the versions of the sections: what a waste of time!
  • If you use CSS ID to create internal links within the same page, these will no longer work because an ID must be unique.
  • This is a not-so-professional way to handle Responsive Design Divi.

So, for all these reasons, use Divi's native options rather than duplicating your sections for different screen sizes. And if that's not enough, if you're still noticing responsive errors, then the problem is with the breakpoint and the Media Queries.

Note: a few years ago, I published an article about a specific concern about responsive with Divi and iOS. This article still seems to be relevant in some cases.

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

9 - Managing Divi's responsive menu

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

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

taille de police responsive menu Divi
The font size options in the Divi menu do not allow you to enter a different value for different screen sizes from the customizer.

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

This is often the reason why readers of Divi Tips contact me saying "my Divi menu is not correct on mobile". Yes, you'll have to modify it with CSS, the famous Media Queries...

10 - Options for previewing Divi's responsive

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

You can manually set the preview size, change the default preview widths for your phone and tablet, and switch between the current device presets. 

This video summarises the main features:

You can change the default preview widths for phone and tablet views so that every time you enter a preview mode, or switch between responsive options, the size of your window reflects the desired width. 

Option Divi "Make Default Phone View"
Divi Option " Make Default Phone View

Change the size of your screens and simply click on the "Make default view button so that the next time you switch to this view, your customised preview size will be reflected.

To find out more, read the official article on the Divi's responsive preview system.

11 - Improving Divi's Breakpoint with Medias Queries

Some WordPress themes allow you to set breakpoints, which allows you to really adapt the design of the site to current screen sizes. But Divi does not offer this option natively.

The Divi Breakpoint and Media Queries are closely related to Responsive Design.

If you want to get a fully responsive Divi site, you will have to go through these crucial steps.

Although Divi natively supports almost all responsive websites - as we've seen throughout this article - it's possible that some elements of your layout are not yet fully optimised for all screen sizes...

You will then need to add some CSS to correct this. But don't panic! We are talking about CSS and not Javascript or any other complicated language! Let's just say that the rest of this article should help novices to fix some responsive bugs with Divi.

12 - What is the Breakpoint?

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

These CSS rules are therefore issued differently depending on a pixel size. This is called the Breakpoint or Breakpoint.

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

Once these breakpoints are defined, it is only necessary to use the Media Queries to issue rules by screen size.

The Divi theme would have 6 breakpoints (as explained in this official article) :

  • Large desk: 1405px and more
  • Standard desktop: 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

The responsive problems you may sometimes encounter can come from one of these sizes. For example, the switch between the computer and tablet versions is either too early or too late.

Getting started with Divi, discover all the articles to start with peace of mind!

13 - What are Media Queries?

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

Medias Queries can be used for print, accessible content for the visually impaired (Braille, etc.), small screens, large screen projections, TV projections, etc.

Most importantly, the Medias Queries will be used to tag certain screen sizes, regardless of the destination, using the value ALL or SCREEN.

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

That's all well and good in theory, but let's get down to the nitty-gritty... Here are 3 types of Media Queries syntaxes 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 be applicable on screens ranging from 0px to 980px.

The prefix max- is used to indicate the maximum size value. From 981px onwards, the CSS rules given here will no longer work.

Small variation:

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

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

14.2 - Responsive design at a certain screen size

Conversely, you can also use the Media Queries to influence the design at 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
}

Any CSS rules you issue here will only apply to screens larger than 980px.

It is the min- prefix that defines the minimum value at which the CSS rules will be taken into account by the browser.

14.3 - Responsive design between two screen sizes

Thanks to the Medias Queries, it is also possible to issue CSS rules for a screen size between two values. Here is an example of the syntax:

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

The CSS rules you place here will only be taken into account for screen sizes between 980px and 1100px.

To go further with Medias Queries, I recommend this excellent article from Alsacreation.

15 - How to identify Divi's Medias Queries?

You have now understood that Divi's Breakpoints have been defined according to certain screen sizes and that the Medias Queries allow you to act on them...

You can group certain screen sizes and act globally on the responsive design of your Divi site, according to 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 the "official" screen sizes listed earlier in this article, namely :

  • Large desk: 1405px and more
  • Standard desktop: 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 is a cheat sheet of the different Divi Medias Queries for 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 is just theory and it is best to inspect your site with a browser (Firefox or Chrome) to define which breakpoints are a concern for responsive.

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

Want to customize Divi like a pro? Check out all the tutorials!

16 - Case study: fixing Divi's responsive menu

Most of the responsive design optimisations can be set natively within Divi's modules using the options provided, as explained in this article.

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

One part of the site that can be tricky is the Header. It may be that the header of your site is suitable on mobile and desktop, but not on tablet. Of course, this is just one example...

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

16.1 - The Browser Inspector: your best ally!

Before you start anything, be aware that your favourite web browser's inspector will become your best friend in the search for a more responsive website!

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

So, let's start at the beginning: you have a problem with your Divi site being responsive? Get your site and a web browser like Firefox or Chrome.

Right-click anywhere on the page of your site... You have options:

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

Cool! The page code appears in a window that looks something like this:

Inspecteur Firefox pour gérer le responsive design de Divi
Firefox Inspector

From here on, we can start!

16.2 - Identify the size of the screen that poses a problem for responsive

Using the inspector of your favourite browser, you can activate the "Responsive Design and check the screen sizes in pixels:

  1. Open your website in Firefox or Chrome.
  2. Right click anywhere on your site (where the responsive bug exists).
  3. Click on "Review Item " or "Inspect " depending on your browser.
  4. Click on the mobile/tablet icon, located on the right or left side of the inspector menu.
  5. Drag the window to determine Divi's Breakpoint and read the size in pixels.

This video will better explain how to identify the screen size to be corrected:

On this video, you have certainly noticed :

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

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

We will have to modify the CSS rule that "says" that the mobile menu only intervenes on screens smaller than 980px. The idea is to increase this value so that the mobile menu intervenes as soon as the screens are lower than 1160px.

16.3 - Correcting the responsive with a new Media Query

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

Responsive Design et Medias Queries Divi
Fixed responsive menu via Divi Medias Queries
  • Go to the Appearances > Customise > Additional CSStab
  • Enter the Media Query that rewrites the basic Divi CSS rule. This new query should 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 says: "up to 1160px, show the mobile menu and hide the normal menu". So, by default, beyond 1160px, the normal menu will be displayed.

Don't forget 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 responsive problem).

/* 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 site:

  • The size of the font,
  • The font used,
  • The size of the logo,
  • And most importantly, 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.

Essayer Divi

17 - In conclusion: Responsive Design Divi is not that complicated!

I'm very curious: did you know about all these Responsive Design Divi options? And do you use Medias Queries to correct some CSS rules for screen sizes?

In this article, you have seen that it is quite easy to fix some responsive errors, simply with Divi's native options. And if that's not enough, Medias Queries will come to the rescue...

Finally, I offer you a reading list about responsive management in Divi:

Responsive design Divi : guide complet
Guide du responsive design Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

79 Commentaires

  1. Mathilde.G

    Super article ! J’ai pu approfondir les méthodes pour rendre mon site responsive ! top merci

  2. DavidArles

    Salut Lycia,
    Je désespère un peu…tu comprendras ma détresse quand tu verras le site que je tente de faire correctement : http://www.ast-arles.com/ast …je sais que énormément de choses sont à revoir d’après les commentaires de la page FB de Divi Community dont je fais partie…Je me rends compte que je ne maitrise…quasi rien, ne serait ce que la base pour faire en sorte que mon site soit regardable…Bref, je suis en train de bosser tout cela en « confinement » pour que, à la base, le design soit correctement centré, avec les marge etc…sans oublier le côté responsive…pour le design de « base » sur PC « maison », je ne trouve pas de tuto valable (j’ai suivi la formation MAK mais qui ne répond pas à mes questions) mais je me doute maintenant que tout est lié, que ce soit PC, ou tablette etc…Suis je sur le bon tuto ici même? Sinon, si tu as une piste ailleurs je suis preneur..Merci à toi!

  3. Lycia Diaz

    Salut David. Pour l’instant je n’ai regardé que la version smartphone et effectivement, il y a de gros soucis… J’irai voir la version desktop. En fait il faudrait savoir si tu as touché des options de marges, padding, dimensions… car c’est le pire à faire ! Plus on met des « valeurs au hasard » plus on a des chances d’avoir des résultats de ce genre. Honnêtement, si j’étais toi, je recommencerais de zéro les pages qui ont de gros soucis, en touchant peu les marges et tailles. Partir de zéro quelque fois c’est mieux que de chercher des heures pour trouver les erreurs… Enfin, la dernière solution : pourquoi ne télécharges-tu pas un layout tout prêt sur ta home page ?

  4. DavidArles

    Salut Lycia, tu as raison je vais repartir de zéro……Et je n’ai pas trouvé de layout tout prêt qui corresponde à ce que je voudrais faire sur ma home page…..

  5. Lycia Diaz

    Ok ! C’est certainement une bonne idée ! Par contre il y a 1300 layouts disponibles, il y en a bien un qui pourrait correspondre à tes besoins. Mon conseil : il ne faut pas que tu regardes la thématique du layout mais plutôt sa disposition. Tu pourrais utiliser un layout d’agence web pour ton site d’art par exemple ! Il suffit juste d’imaginer ce que ça pourrait donner avec tes propres photos, ton propre teste, ta propre police, etc… et les sections qui ne te conviennent pas, tu les supprimes ! Aller, courage !

  6. DavidArles

    C’est ce que je fais, je suis en pleine recherche et motivé!! Merci Lycia!!! Prends bien soin de toi et de ta famille 🙂

    Tu auras en exclusivité le super nouveau site que je vais faire 🙂

  7. Lycia Diaz

    Super !

  8. MaximeCS

    Bonjour Lycia,

    Je suis actuellement en train de faire la refonte d’un site avec DIVI. Tout le contenu a été réalisé pour l’affichage desktop. Cet affichage est parfait. Néanmoins, un problème m’est survenu : l’affichage responsive (tablette/smartphone) n’est pas « adapté » car j’ai le fond de couleur de mon site qui est apparent à droite. C’est à dire que la taille de l’écran n’est pas « optimisé ». Je te laisse le lien de mon site : https://ehpad-saint-joseph.net
    Tu comprendras par toi même lorsque tu le verras (c’est plus simple que par des mots haha).
    J’espère que tu pourras me guider pour résoudre mon problème.

    Merci d’avance 😉 Bonne journée.

  9. Lycia Diaz

    Salut Maxime,
    De mon côté, sur iPhone, tout est bon. Tu as trouvé une solution finalement ?
    A bientôt
    Lycia

  10. Dylan - Shoukei

    Bonjour à tous !

    J’ai quasiment fini tout mon site sous divi, mais j’ai quelques soucis de responsive dessus..
    Je ne m’y connais pas énormément en code, et j’ai essayer de faire la partie 12 de ce tuto, mais en vain…

    Quelqu’un pourrais-t-il m’aider ? 🙂

  11. Lycia Diaz

    Salut Dylan, normalement, en utilisant correctement les options Responsives de Divi, tu n’as même pas besoin de toucher au code. La subtilité est de ne pas trop toucher aux marges et aux marges internes. Au plus tu trafique les valeurs, au plus tu peux avoir des soucis.

  12. DavidArles

    Bonjour à tous,

    Peut on mettre ces lignes de codes dans le css enfant? Si oui, où?
    Merci beaucoup!

  13. Lycia Diaz

    Salut David, si tu as du CSS à ajouter, tu peux le mettre dans le fichier style.css de ton thème enfant, effectivement, mais c’est bien plus simple et pratique de le faire directement dans ton back-office, à l’onglet Apparence > Personnaliser > CSS personnalisé

  14. DavidArles

    Merci Lycia pour ton aide précieuse…et rapide!!
    Je vais essayer ça!
    David

  15. Michele

    ouah !!! tout ça c’est bien compliqué!!
    j’etais hyper contente d’avoir reussi un tout petit diaporama (oui je sais c’est plus la mode!)! mais mes amis du club aiment bien avoir leurs photos lauréates qui tournent sur la page d’acceuil (il y en 4 )j’ai galéré avec les formats !!! et super contente d »avoir réussi avec smart slider et ensuite lmis le shortcode sur Divi
    et alors quel désespor !! sur le mobile ca donne rien
    je voulais changer cette section par une image mais non c’est déconseillé !!heureusement que je lis tous les posts et le livre jour et nuit !!!!
    alors quoi fais -je ?? eh ben tant pis y aura une plage blanche sur le mobile et je désactive
    c’est le mieux non ??
    PS je trouve tjs les reponses sur ce site c’est fou même qd elles ne me plaisent pas

  16. Michele

    bonjour
    hier soir ca n’etait pas responsive
    ce matin sur mon ecran de tel tout est clean
    par contre l’aperçu dans Divi au survol ne marche pas
    donc mon post d’avant ne compte pas
    merci pour ce site ultra génial et complet

  17. Lycia Diaz

    Merci Michèle.
    Fais attention car les navigateurs mobiles mettent souvent en cache ton site. Du coup, tu peux croire que ça ne marche pas, alors que ce n’est qu’une question de mise en cache. Si tu as un plugin de cache, pense à le vider lorsque tu fais beaucoup de changement.

  18. adrien Pochon

    Bonjour merci pour ce tuto mais n’étant pas un expert en code je ne sais pas si cela va pouvoir résolutionner mon problème j’ai mis une image en plein écran avec divi et j’aimerai qu’elle remplisse sur tout type d’écran la page en entière (qu’on n’ait pas besoin de scroll ou que mon contenu en dessous soit visible sans scroller)
    Sauf que soi mon image est trop grande soit cela me la rogne (je ne pense pas que ce soit du media quieries puisque la taille sera différente en fonction de chaque taille d’écran (15,6 pouces; 23 pouces…)

    Merci à vous pour votre aide

  19. Lycia Diaz

    Salut Adrien,
    J’ai du mal à comprendre. Par exemple, si ton image est en format portrait, il y a de grandes chances que tu sois obligé de scroller. Il n’y a aucune possibilité que ce soit un souci de responsive, je pense. C’est une histoire de format. Du coup, est-ce que j’ai bien compris ta question ?

  20. adrien Pochon

    Oui mon image est en portrait cela doit être la raison, bon et bien tant pis merci en tout cas

  21. Olivier De bosscher

    Bonjour, j’ai un souci avec le menu en mode tablette ou mobile, je ne sais pas pourquoi, mais le logo se mets au dessus du menu, du coup impossible de cliquer sur les différents sous menu. je le doute que c’est une bêtise, mais je ne trouve pas. http://www.mrib.be

  22. Lycia Diaz

    Salut Olivier,
    Ton menu est fait avec le thème builder ? On dirait une histoire de taille ou de Z-Index. Tu peux chercher de ce côté-là.

  23. Olivier De Bosscher

    Le menu est fait avec wordpress > Apparence > Menu

  24. Lycia Diaz

    Peut-être faut-il réduire la taille du logo ? Mais je pense plutôt que le bouton rouge de droite est peut-être le coupable. Essaye de le déplacer pour voir ?

  25. Olivier De Bosscher

    Tu avais raison, c’est le Z-index, par contre je n’ai pas compris à quoi çà sert. On en parle dans le PDF que tu vends sur le site ?

  26. Lycia Diaz

    Salut Olivier. Le z-index sert à donner une valeur de « superposition ». Un peu comme des couches que tu superposes. 0 = en dessous et 9999 et au plus haut de la pile. Tu as finalement trouvé le problème et corrigé ?

  27. Olivier De Bosscher

    Oui, c’est résolu, un grand merci à toi, j’ai également commandé ton pdf a vie, il est super

  28. Lycia Diaz

    Super Olivier, je suis ravie et j’espère que mon Ebook va t’aider 🙂

  29. Elisabeth

    Bonjour,
    Impossible pour moi d’avoir le résultat voulue en mode responsive et j’ai donc un affichage juste horrible sur tablette et mobile.

    Si possible d’avoir un coup de main 🙂

    Mon site : http://www.photographe-elisabeth-mazet.com

  30. Stephane

    Salut Lycia,
    super article très bien expliqué. Je me suis servi de ton CSS pour afficher le menu mobile à partir d’une certaine taille.
    Je me demandais comment on peut faire pour que ce soit tout le design pour mobile qui apparaisse jusqu’à 980px ?

    Passe une top journée.

    Stephane.

  31. Lycia Diaz

    Stephane, l’article sur les médias que ries devrait t’éclairer

  32. Sabrina

    Bonjour

    Tout d’abord merci pour toutes les informations cela est d’une grande aide.

    J’ai un soucis, j’ai créé un menu avec le Divi builder avec seulement le logo centré, sur destok tout est ok, mais sur tablette et mobile le logo ne ressort pas, j’ai juste la bande de menu vide, je galère depuis plusieurs jours pour essayer de trouver une solution mais impossible.
    Pourriez-vous m’aider, pour infos je ne suis pas experte
    Merci encore

  33. Lycia Diaz

    Salut Sabrina. C’est bizarre, il y a peut-être un conflit ?

  34. JULIE S

    Bonjour Lycia !
    J’ai un soucis sur mon site avec le menu. J’ai essayé la manip comme expliqué sur la vidéo mais rien à faire, rien ne bouge. Une solution à me proposer pour m’aider ? Merci infiniment !

  35. Lycia Diaz

    Salut Julie, c’est quoi le problème ? Tu as le lien de ton site à partager ?

  36. Mathilde

    Bonjour Lycia,

    Le site que j’ai conçu s’affiche correctement sur mon écran, mais sur d’autres (plus grands), il y a des blocs de textes qui se surperposent… voir qui disparraissent derrière des images ou qui passent au-dessus… Sais-tu d’où ce problème peut provenir ?

    Merci beaucoup !

  37. Lycia Diaz

    Salut Mathilde, c’est bizarre… As-tu touché à des marges ? Il vaut mieux éviter la plupart du temps…

  38. Alain Mazy

    Salut Lycia, ton site m’a été d’un grand secours pour dénicher des p’tits secrets intéressants, mais le monde n’étant pas parfait, DIVI ne l’est pas non plus! Pour les soucis quand on étirent les marges à la souris, j’ai galéré souvent car divi se fige et il faut recharger la page pour débloquer, j’ai fini par moi même, par le faire via des propriétés. Par contre, pour ce qui est du responsive à l’aide des 3 écrans sur certains paramètres, comme les marges, et bien parfois, ça ne fonctionne pas du tout ! parfois, il ne mémorise pas la valeur que j’attribue, ou au contraire, l’attribue à tout les écrans, ce qui ne convient pas évidement. Il faudrait une mise à jour de Divi avec une réelle mémorisation dans les fichiers CSS. Je ne les modifies pas moi même, car je suppose qu’a chaque enregistrement de page, le CSS est écrasé. Même si ce n’est pas une bonne méthode de cacher, je vais essayer de l’utiliser avec les modules récalcitrants. je tente de réalister mon 1er site avec WP-Divi.
    PS: Chez l’hébergeur Infomaniak.com Tu as DIVI gratuitement ! 😉

  39. Gwladys

    Bonjour Lycia,
    Merci pour ton blog truffé de super conseils, je fais mon site toute seule sous Divi et il m’a aidée à débloquer pas mal de problèmes. Merci mille fois !
    Toutefois, il reste un point que je n’arrive toujours pas à saisir : pourquoi certaines modifications CSS réalisées dans le thème enfant ne modifient pas les données du thème parent ? Par exemple, le logo de mon menu n’apparaît pas sur mobile et tablette et quand je clique sur « Inspecter », je vois qu’une fonction .et_hide_mobile_logo est configurée dans le thème parent. Quand j’apporte des modifications dans le thème enfant pour corriger cela, rien ne bouge… le logo ne s’affiche toujours pas. Et pourtant, dans la Divi Toolbox, la case « cacher le logo » est bien décochée…
    Sais-tu si cela est récurrent et d’où cela peut provenir ?
    Merci de ton éclairage,
    Belle journée à toi,
    Gwladys

  40. Lycia Diaz

    Salut Gladys, il peut y avoir plusieurs raisons : soit ton thème enfant ne fonctionne pas, soit le code que tu ajoutes dans le thème enfant n’appelle pas les bonnes classes. Sinon, as-tu essayé avec « !important » des fois ça règle le problème

  41. Mathilde

    Bonjour Lycia, en effet, le problème venait des marges ! Grâce à toi, j’ai tout remis à zéro et j’ai tout recommancé sans y toucher et en me concentrant sur la taille des modules. Merci !!

  42. Lycia Diaz

    Super Mathilde !

  43. Alain Mazy

    Tu dois être très très très optimiste ou cacher certaines vérités, chez moi, ça bug à mort surtout le responsive.. je deviens fou avec ça. quand tu écrit une valeur de de marge en desktop, et que tu vas régler les autres vues, le desktop se met alors comme le tablette ou le phone. il faut revenir dessus et recommencer, c’est fréquent, puis tu n’as pas le même résultat dans les navigateurs par rapport à ce que tu as dans l’environnement divi, ça fonctionne pas mal en relatif, mais quand tu veux fixer un menu en place, tout se casse dans tous les sens, parfois même sans pouvoir y remédier.. Régler les marges à la souris, je n’essaye même plus, ça fige le curseur de la souris 9X sur 10 .. et j’en passe.. C’est moi qui suit super con ou Divi ne fonctionne pas vraiment comme on veut??

  44. Lycia Diaz

    Salut Alain, tu dois passer par l’icône du téléphone qui se trouve dans chaque module pour régler les marges. Si tu par les icônes du builder en bas à gauche, cela te génère un aperçu mais ce n’est pas là que tu dois saisir les valeurs car effectivement ça change pour toutes les vues. Tu comprends ?

  45. Patrick

    Bonjour Lycia,
    Merci pour ton blog que j’ai lu.
    Les boutons de navigation à l’intérieur des pages de mon site ne fonctionnent plus au dessus du breakpoint 980px (Desktop) : identifié sous inspection Firefox ou Chrome. Je ne sais pas pourquoi DIVI a inséré un max-width sur le fonctionnement des boutons. Comment contourner cette règle avec un media query CSS ?
    Merci.
    Au plaisir,
    Patrick

  46. Lycia Diaz

    Salut Patrick. Alors là tu m’en poses une belle ! Il faudrait regarder. C’est quoi les « boutons » de navigation ? Tu parles des éléments de menu ?

  47. Patrick

    Bonjour Lycia,
    Je vois que tu as répondu très rapidement, et moi j’ai laissé passer … dsl …
    Mon site pas très compliqué est : https://allosoft.fr et tu peux voir par toi même. Les boutons sont ce qu’il y a de plus classique (En savoir plus, double flèche descendre, Accueil, etc) en pleine page et permettent des raccourcis rapides dans une page surtout en format smartphone. Mais je souhaiterais qu’ils fonctionnent en responsive quelque soit le terminal (desktop, ipad ou terminal). Or lorsque l’on dépasse une largeur d’écran au dessus de 980px (dont la valeur, je pense, est la largeur max Desktop programmée par DIVI), ils deviennent inactifs, et là est ma question de quel media query CSS il faudrait utiliser.
    Merci.
    Au plaisir,
    Patrick

  48. Patrick

    Bonjour Lycia,
    Cela fait la 3ème fois que je poste et ma réponse disparaît … je ne sais pas pourquoi.
    Regarde mon site allosoft.fr, au delà de 980px de largeur d’écran les boutons de navigations deviennent inactifs.
    Je souhaiterais conserver le responsive quelque soit le type de terminal.
    Merci.
    Au plaisir,
    Patrick

  49. Patrick

    Il est manifestement impossible de te répondre sur ce site …

  50. Lycia Diaz

    Salut Patrick, j’ai regardé le code. Il y a des valeurs bizarres, et même quand le les désactives, le menu n’est pas visible. Du coup, tu as dû utiliser des options qu’il n’aurait pas fallu, j’imagine. As-tu utilisé le thème Builder pour ton header ? Je serais toi, je referai un header de zéro (tu enregistres l’existant au cas où tu veux revenir en arrière) et tu coches le moins d’option possible dans les options de ton module Menu. Si le problème est toujours là, c’est que ça vient d’autre part. Il faut investiguer 😉

  51. Lycia Diaz

    Désolée Patrick, tes messages arrivent très bien, c’est moi qui ai pris beaucoup de retard dans mes réponses. désolée…

  52. Lycia Diaz

    Non Patrick, la réponse ne disparaît pas 😉 je ne l’avais juste pas encore validée… Je ne travaille pas sur Astuces Divi 100% de mon temps, malheureusement. J’aimerais pourtant, crois-moi, mais pour ça il faudrait que je rende l’accès à ce site payant ;-( Vous êtes très nombreux à m’envoyer vos demandes d’aide, mais pas toutes peuvent être résolues en quelques lignes… J’ai bien regardé ton site, j’ai pris 10 minutes pour faire cela (gratuitement) et je n’ai pas trouvé de réponses. Il faut que j’investigue davantage mais cela est impossible : je ne vis pas d’amour et d’eau fraiche 😉 Crois-moi que quand je trouve une réponse en moins de 5 minutes, je réponds à vos commentaires et vous donne la solution avec plaisir. Ton code est bizarre, il peut y avoir diverses raisons : as-tu désactivé la visibilité dans les options de ta section/ligne/module. Utilises-tu le menu natif ou le Theme Builder, as-tu ajouté du code personnalisé… Tu comprends bien que je ne peux pas trouver de réponses quand je n’ai que la partie visible de l’iceberg sous les yeux. Comme dit précédemment, je jetterais et je recommencerai, souvent le problème est réglé comme ça. C’est souvent plus rapide que de chercher pendant des heures.. Tiens-moi au courant.

  53. Patrick

    Bonjour Lycia,
    Ne te méprends pas et ne culpabilise pas, je ne te fais aucun reproche, c’est déjà très sympa que tu répondes :). C’est que sur AstucesDivi, il est perturbant de ne pas avoir toujours la même visibilité selon l’url que l’on choisit. On pense avoir posté, puis non, puis oui. Encore une fois 1000 excuses :).
    J’utilise le Theme Builder, je n’ai pas rajouté de code et j’essaie de toucher le moins de paramètres possible.
    Je vais investiguer et je te tiendrai au courant.
    Merci encore.
    Patrick

  54. Lycia Diaz

    Y’a pas de souci Patrick 😉
    Pour info, si tu utilises le theme Builder, c’est plus facile. Il suffit de jeter ton Header et de le reconstruire. Si l’erreur est partie, c’est que ça venait des paramètres. Si l’erreur est toujours là, c’est que ça vient d’ailleurs.

  55. Snoopy

    Bonjour Lycia,
    Comment faire pour que lorsque que la taille de l’écran change tout ne se bascule pas et cause un réel désordre entre les différentes lignes et sections stp ? J’ai compris qu’il existe les breakpoints et media queries mais je n’ai rien compris en pratique.. Merci d’avance.

  56. Laura user

    Bonjour, j’ai besoin d’un renseignement : Je souhaite avoir un logo responsive, en clair que le logo sur la version ordinateur ne sois pas le même que la version mobile.
    J’ai tout essayé à mon niveau..

    Quelqu’un a une solution ?

    Merci

  57. Lycia Diaz

    Salut Lara, il n’y a pas de solutions, sauf coder à la main ou utiliser un plugin qui propose cette fonctionnalité.

  58. Arnaud Baltus

    Bonjour, excusez moi de vous déranger, je vous contacte car je rencontre un problème avec mon menu déroulant hamburger pour la version gsm. Lorsque je suis sur la version ordinateur mon menu principale est classique avec les différentes rubriques étalées de gauche à droite (cela me convient très bien de la sorte), mais une fois sur téléphone pour une question de praticité (j’imagine), celui ci passe en type « hamburger ». Seul hic il n’est entièrement déroulant, que lorsque la page sous lui est suffisamment longue, sans quoi le menu déroulant se bloque en fonction de la longueur de la page +- tôt. Par exemple, sur une page comprenant beaucoup de contenu, je pourrais dérouler mon menu jusqu’à voir la boutique et le panier apparaitre dans la liste, mais si je suis sur la page de « remerciement » très maigre en contenu, je ne pourrais pas atteindre plus de la moitié de ma liste. En espérant, que vous pourrez peut-être m’aider (idéalement sans que je doive me défaire de ces 2 types de menu que je trouve fort bien plaisant pour chacune des versions..). Un grand merci à vous !

  59. Arnaud Baltus

    J’ajoute un commentaire de plus pour remercier Lycia qui a trouvé la solution au sujet de l’en-tête qui disparait dans le menu apparence-personnaliser. Pour tout ceux qui rencontrent cette problématique, la raison est bien un conflit existant entre une entête globale existant dans le divi thème builder et la création d’une entête dans la section apparence-personnaliser. La solution était donc de supprimer l’en tête dans le divi thème builder, afin de laisser réapparaitre la partie entête dans la section apparence-personnaliser.
    Un grand merci pour votre aide !

  60. Lycia Diaz

    Salut Arnaud, il n’y a pas vraiment de solution pour régler le problème… il faut bidouiller… soit tu supprimes quelques éléments de ton menu, soit tu ajoutes du contenu pour les pages « maigres ». Sinon, tu pourrais aussi ajouter de la marge en pixel en bas de tes pages uniquement sur la version mobile, ce qui remplacerait le manque de contenu et permettrait à ton menu de se dérouler correctement.

  61. Lycia Diaz

    Oui Arnaud… en fait ce n’est pas réellement un conflit, les développeurs ont juste supprimer les options de menu dans Apparence > Personnaliser car c’est l’entête globale qui prend le dessus et donc ces options ne servent plus à rien dans ce cas…

  62. Mathieu

    Bonjour,
    Avec DIVI, Elegant themes, je rencontre un problème de responsive dont je ne trouve nulle part la solution.
    Dans mon header (fond + titre), je crée une section « normal » que je divise en deux colonnes, à gauche le texte et à droite une image png 200*200. Or cette image ne se réduit pas pour les sections tablettes et mobiles.
    Le résultat est qu’en mode mobile, l’image (énorme) sort du cadre…

    Une indication ?

    Par avance, merci.

  63. Sophie Nicaud

    Bonjour,

    Comment modifier la taille par défaut des H1 et H2 dans Divi child pour la version mobile et Desk ?
    Merci par avance,
    Sophie

  64. Manon

    Bonjour,

    Je n’arrive pas à avoir le même affichage sur tous les types de téléphones…lorsque je fais les modifications pour une catégorie de téléphone par exemple et bien ça n’enregistre pas les autres catégories… Comment faire ?

    Merci pour l’aide

  65. Lycia Diaz

    Salut Manon, c’est normal, il ne faut pas agir sur les « vue responsive » mais il faut éditer les options responsives de chaque module que tu dois modifier (icône du téléphone au survol de la souris)

  66. Lycia Diaz

    Salut Mathieu, normalement, Divi gère nativement le responsive mais si dans l’onglet « Dimension » tu as donné des valeurs en pixel « stictes », c’est normal que l’image ne se réduit pas. Il ne faut jamais toucher à l’onglet « Dimension » que ce soit pour les modules, les lignes ou les sections, sans connaitre les conséquences. Donc ton problème vient peut-être de là ?

  67. ingrid

    Bonjour, tout d’abord je vous remercie pour le partage de vos connaissances, aujourd’hui je vous écris car je ne parviens pas du tout à régler ce point de rupture : entre 768 et 1013px, une partie des liens (dans la partie ‘Nos Derniers Articles’ en bas de la page d’accueil sont invisibles sur format tablette. Je ne connais pas le codage, je copie colle des codes css néanmoins. Mais là, je ne sais pas du tout comment faire, peut être pourrez-vous m’aider ? Je vous remercie par avance !

  68. Thierry

    Bonjour,
    Merci pour vos tutos qui me sont très utiles. J’ai fait énormément de progrès grâce à vous sur la taille des textes.
    En revanche, je ne parviens pas à modifier le layout de certains encadrés en lecture sur téléphone ce qui me pose problème.
    Si toutefois vous avez une astuce, je suis preneur !
    Bonne journée
    Thierry

  69. Lycia Diaz

    Bonsoir Thierry. Regarde dans l’onglet « dimensionnement » tu peux augmenter le pourcentage de 80 à 100% par exemple, ça peut venir de là

  70. Mathilde16

    Merci Lycia, tellement clair et précis !
    Sur ma version mobile j’ai à droite et à gauche un espace blanc qui apparaît quand je bouge vers la droite ou la gauche.
    Je ne sais pas comment rendre « fixe » (ou plein écran?) mon site, auriez-vous une piste ?
    Merci infiniment

  71. Lycia Diaz

    Il doit y avoir un élément dans ta page qui pose souci. Par exemple une vidéo ou un élément embed. Essaye de le supprimer et regarde si le souci disparaît

  72. Lycia Diaz

    Il faudrait regarder, effectivement, c’est au cas par cas 😉

  73. Donald drou

    merci pour votre explicaton et j’aimerais savoir quel role joue l’unité de mésure vw dans l’adaptation des site au lieu du pixel

  74. Lycia Diaz

    Le vw est une mesure en fonction du viewport (en fonction des écrans), un peu comme le %. C’est mieux que le px qui lui reste fixe.

  75. elise

    Bonjour, je rencontre un soucis et je ne sais pas si quelqu’un connaîs la solution 🙂
    Quand je cherche à modifier les séctions de ma page de manière responsive, dès que je clique sur le format « telephone » l’apperçu remonte tout en haut de la page et je dois modifier la section qui est plus bas à l’aveugle…
    Quelqu’un saurait d’où vient de bug ?
    HELP ^^

  76. Geoffrey

    Bonjour, merci pour cet article très bien expliqué.
    J’ai tout de même une question concernant les images d’arrière plan. Je m’explique, j’ai créé une section avec une colonne dont le fond est une image. J’ai insérer un module texte caler parfaitement à l’image d’arrière plan. Pour la version mobile aucun souci, mais pour la version bureau je n’ai pas le même rendu. Comment je peux faire pour que mon image soit positionne pareil sur tous mes écrans ? Merci

  77. Menikh

    Bonjour Lycia,

    Lorsque j’ajoute du CSS, notamment pour faire varier les break points de mon menu primaire, que l’ajout soit fait dans mon thème enfant ou dans le CSS additionnel de Divi ; cela ne fonctionne pas.

    Le fait que le menu soit construit avec le thème builder, peut-il y avoir un lien ?

    Cordialement.

  78. Lycia Diaz

    Oui, il faut vérifier de s’appuyer sur les bonnes class CSS

  79. Lycia Diaz

    C’est impossible, un site web est fluide, les images le sont donc aussi 😉

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.