¿El diseño "Boxed Layout" de Divi es para ti?

12 Comentarios

1. 

   David sur 1 mai 2019 à 15:10

   On est d’accord que sur Ecran de PC c’est plus lisible surtout avec les tailles d’écran en WXGA d’aujourd’hui.

   Par contre sur Mobile on n’a pas forcement envi d’avoir une marge sur les cotés… L’écran étant déjà réduit en visibilité (largeur).

   Du coup, je cherche à mettre la taille en pleine largeur seulement sur mobile.
   J’y arrive mais le top-heder et main-header se mettent aussi à 100%, du coup plus de marge là ou se trouve le logo et l’hamburger…

   Voici le code utilisé :
   /* Largeur page sur mobile */
   @media only screen and (max-width:980px) {
   .et_boxed_layout #page-container,
   .et_boxed_layout #page-container .container,
   .et_boxed_layout #page-container .et_pb_row,
   .et_boxed_layout.et_non_fixed_nav.et_transparent_nav #page-container #top-header,
   .et_boxed_layout.et_pb_pagebuilder_layout.single #page-container .et_pb_row,
   .et_boxed_layout.et_pb_pagebuilder_layout.single.et_full_width_page #page-container .et_pb_row,
   .et_boxed_layout.et_pb_pagebuilder_layout.single.et_full_width_portfolio_page #page-container .et_pb_row,
   .et_fixed_nav.et_boxed_layout #page-container #main-header,
   .et_fixed_nav.et_boxed_layout #page-container #top-header,
   .et_non_fixed_nav.et_transparent_nav.et_boxed_layout #page-container #main-header {
   width: 100% !important;
   }
   }

   Je vois que sur le site Divi Soup il est bien configuré.
   Avez-vous une idée des class et ID à modifier ?

2. 

   Lycia Diaz sur 2 mai 2019 à 00:12

   Je comprends tout à fait ce que tu veux dire mais il faudrait que je teste pour voir sur quelle classe CSS s’appuyer. Si j’ai un moment, je regarde…

3. 

   David sur 2 mai 2019 à 01:05

   Merci par avance Lycia.
   J’ai un site de test au besoin 😉

4. 

   Lycia Diaz sur 2 mai 2019 à 09:01

   As-tu un lien ?

5. 

   David sur 3 mai 2019 à 10:36

   Pardon pour le temps de réponse. Je finalisais le WP de test avec DIVI et la page emboitée.
   Je t’ai envoyé un mail avec les accès 😉

6. 

   Dominique sur 5 mai 2019 à 18:28

   Merci pour vos conseils. Cela m’a super bien aide

7. 

   Lycia Diaz sur 10 mai 2019 à 16:33

   Merci Dominique 😉

8. 

   Fab sur 2 août 2019 à 11:04

   Je serais aussi intéressé par une solution de mise en page emboitée uniquement pour ordinateurs (et 100% pour les mobiles). Si quelqu’un a une solution…

9. 

   Lycia Diaz sur 20 août 2019 à 18:37

   Salut Fab,
   Je suppose que ce n’est pas compliqué mais il faut que je cherche un peu. Dès que j’ai le temps, je mets le tuto à jour. En attendant, tu peux chercher du côté du CSS et des media-queries.

10. 

    David sur 20 août 2019 à 19:21

    Aller c’est cadeau 😉

    /* Page pleine largeur sur Mobile */
    @media only screen and (max-width: 980px) {
    .et_boxed_layout #page-container,
    .et_boxed_layout #page-container #main-header,
    .et_boxed_layout #page-container #top-header,
    .et_boxed_layout #page-container #main-footer {
    width: 100% !important;
    }
    }

11. 

    Lycia Diaz sur 20 août 2019 à 19:36

    Merci 😉

12. 

    David sur 20 août 2019 à 20:09

    Bien entendu cela fonctionne que par rapport à la taille de l’écran < 980px.
    Et non depuis le type de périphérique utilisé (Mobile, tablette, PC/MAC, etc…)

    Il serai éventuellement possible de le faire en jQuery mais je ne vois pas trop l’intérêt.

    A 980px, on a les smartphone et les tablettes (en mode portrait seulement, en paysage la largeur dépasse souvent les 980px).

Este sitio utiliza Akismet para reducir indeseables. Más información sobre cómo se utilizan sus datos de retroalimentación.