Responsive Design Divi: how to manage different screen sizes?

Published on 17/02/2020 | 29 comments

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

I would like to answer: "It's child's play" 😉

But when you think about it, Divi's response options aren't obvious. They're there... but a little hidden...

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

Note: since August 2019, the responsive options of the Divi theme have been improved as shown in this video :

Voir l’article officiel ici.

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

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

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

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

More and more users are surfing from their mobile phones, whether during their breaks or when travelling by public transport, and this is very important!

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

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

You can check this from your data Google AnalyticsGo to the Audience > Mobile > Overview tab.

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

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

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

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 sites or lifestyles...

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

2 - Native management of Responsive Design in Divi

It may be necessary to specify that the Divi theme is a WordPress responsive theme. Although this is the case for 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 reading on the small screen. WordPress and its responsive themes offered site creators a quick and simple solution to adapt to any screen size.

However, there are hundreds of screen sizes on the market today. Which wasn't the case at first. There are Android screens, tablets, iPhones, and so on. And with each new smartphone released, you discover a new screen size... Again!

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

And maybe even in a few days, when your boyfriend, who uses a smartphone out from behind the bundles, will tell you: "the menu on your site is weird on my phone"?

You have checked all the versions of your site with all the terminals you had on hand, but you are not a phone shop 🙂 either.

Anyway, anyway. This reinforces me in the idea that a site is never really perfect... The important thing is to make it evolve!

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

3 - Manage default font sizes for the whole 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 customization options:

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

For mobiles and tablets, you can act on :

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

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

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

4 - 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 display
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 won't really control the various versions. I would advise you to manage this type of response directly from the Divi modules concerned.

You're not using Divi yet? Are you hesitating? Discover the Divi theme here !

5 - Responsive management directly in the Divi modules

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

Divi's CSS includes a style sheet that optimizes, by default, the mobile versions.

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

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 will need to pay particular attention is within your modules.

If you want your site to adapt perfectly to different screen sizes, you will have to correct certain elements as you create your site.

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

5.1 - Making text responsive with Divi

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

Legibility is an important criterion to improve the user experience.

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

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

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

Note, also, 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.

5.2 - Playing with colours according to screen size

Since this responsive functionality is available in just about every option in every module, you can also use it for other purposes. For example, you could define 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.

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

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

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

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

This is just an example but you get the idea, there will be no more limits in terms of customization and optimization according to screen sizes.

6 - Visibility conditions according to the screens

In some cases, you might decide to display some items on your mobile and some on your 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 phones (although some desktops can make calls).

bouton appeler pour mobile uniquement
Button to initiate a call

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

désactiver bouton appel sur desktop
Disable call button on desktop and tablet
  • Edit the module to be optimized
  • 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 the tablet and desktop versions so that it is only available on the phone version.
  • Save.

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

7 - Separate sections for each device? Not recommended!

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

Ouch, don't do that!

You can use the visibility options very sparingly, as for a call button for example, but it should not go any 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 have to modify all the versions of sections: what a waste of time!
  • If you use IDs to create internal links within the same page, these will no longer work because an ID must be unique.
  • It's not a very professional way to handle Responsive Design Divi.

So, for all these reasons, prefer Divi's native options rather than duplicating your sections based on screen sizes. And if that's not enough, if you still notice some response errors, it's because the problem comes from the breaking point and the Media Queries.

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

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

8 - Manage Divi native menu response

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

However, if you are not using the Theme Builder and you are using a Divi site header classic, with a navigation menu created from the Customizer (menu Appearance > Customize), these responsive optimization 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 screen sizes from the customizer.

As you can see in the capture above, the size of the menu text does not provide options for the 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 Divi Tip readers often contact me saying "my Divi menu is not correct on my mobile". Yes, we'll have to modify this with CSS, the famous Media Queries...

9 - No native Breakpoint management: Media Queries recommended!

Some WordPress themes allow you to define breakpoints, which allows you to really adapt the site design to the current screen sizes. But Divi doesn't offer this option natively.

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

If you want a fully responsive Divi site, you will need to go through these critical steps.

Although Divi natively manages almost all of a responsive website - as we've seen throughout this article - it's 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 about CSS and not Javascript or any other complicated language! Let's say that the rest of this article should help the more novices to fix some responsive bugs with Divi.

10 - What is Breakpoint or Point de Rupture ?

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

These CSS rules are therefore issued differently according to pixel size. It's called Breakpoint or Point de Rupture.

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

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

The Divi theme would be provided with 6 breakpoints (as explained in this official article) :

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

The responsive concerns you may sometimes encounter may come from one of these sizes. For example, switching between the computer version and the tablet version is too early or too late.

To get started with Divi, discover all the articles to start serenely!

11 - What is Media Queries?

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 act on printing, accessible content intended for the visually impaired (Braille, etc.), small screens, large screen projections, projections on TVs, etc.

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

12 - The principle of Media Queries for a precise management of Responsive Design

It's all well and good the theory but let's put it into practice... Here are 3 types of syntax of Medias Queries that will allow you to act on the responsive design:

12.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 max- prefix is used to designate the maximum value. As of 981px, the CSS rule(s) issued here will no longer work.

Small variant:

@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 types of media (not just screens). In both cases, you will act on the responsive design of your Divi website. The ALL value will be wider than the SCREEN value.

12.2 - Responsive design above a certain screen size

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

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

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

12.3 - Responsive design between two screen sizes

Thanks to the Media Queries, it 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 place here will only be taken into account for screens between 980px and 1100px.

To go further with the Media Queries, I recommend this excellent Alsacreation article.

13 - How to identify Divi's Media Queries?

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

You can group certain screen sizes and globally influence 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 the "official" screen sizes listed earlier in this article, namely :

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

Here is a sheet of the different Divi Media Queries 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 is only theory and it is preferable to inspect your site using a browser (Firefox or Chrome) to define what are the breakpoints that pose a concern for responsiveness.

To better understand, I offer you a concrete case...

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

14 - Case study: correcting the Divi responsive menu

Most of the responsive design optimizations can be set natively within Divi's modules through options provided for this purpose, as explained in this article.

But sometimes 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 sensitive is the Header. Your site header may be suitable for mobile and desktop, but not for tablet. Of course, this is just one of many examples...

To better explain you how to manage the different screen sizes and how to deal with some bugs, I propose you a concrete example from a bug present on Tips Divi...

14.1 - The Navigator Inspector: Your best ally!

Before you start anything, know that the inspector of your favorite web browser will become your best friend in the search for a more responsive website!

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

So, let's start at the beginning: you have a problem with responsiveness on your Divi site? Have your site and a web browser such as Firefox or Chrome.

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

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

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

Well, from here we can get started!

14.2 - Identifying the screen size that poses a problem of responsiveness

Using the inspector of your favorite browser, you will be able to activate the option "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 see the size in pixels.

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

On this video, you may have noticed:

  • 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 oversized, the elements overlap.
  • From 1160px the Divi main menu becomes correct.

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

We'll have to modify the CSS rule that "says" that the mobile menu only works on screens less than 980px. The idea is to increase this value so that the mobile menu intervenes as soon as the screens are below 1160px.

14.3 - Correcting the responsive with a new Media Querie

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
Correction of the responsive menu via Divi Queries Media
  • Go to the Appearances tab > Customize > Additional CSS
  • Enter the Media Querie that rewrites Divi's basic CSS rule. This new request 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 commands: "up to 1160px, displays the mobile menu and hides the normal menu". So, by default, above 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: reducing the menu font and logo size on screens between 980px and 1160px (a size where the menu presented a response 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 sites:

  • The font size,
  • 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 to your needs.

Essayer Divi

15 - In conclusion: Responsive Design Divi, it's not that complicated!

I'm very curious: were you aware of all these options of Responsive Design Divi? And do you use Media Queries to correct some CSS rules for screen sizes?

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

Finally, I propose you a reading list about the management of the responsive under Divi :

Responsive design Divi : guide complet
Guide du responsive design Divi
Divi Tips n°90 responsive design

4,313 words

17

You should like it too:

Effet zoom sur image avec texte cliquable

Zoom effect on image with clickable text

This article explains how to get a simple zoom effect when hovering over images with text and a clickable link. No need for an extension, Divi makes it easy!

29 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

Soumettre un commentaire

Votre adresse de messagerie 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.

Pin It on Pinterest

Shares
Share This