Chrome et Firefox avec des flexbox...

Bonjour,

Je n'ai pas pu te répondre hier soir. 

Ton code est globalement bien structuré, mais quelques ajustements peuvent être faits pour améliorer la compatibilité entre navigateurs et garantir un comportement responsive cohérent. Voici une version corrigée de ton code :

<div class="BlocMain">
    <!--Aside-->
    <aside id="aside">
        <div id="BlocAside">
            <div class="BlocBenefit">
                <div class="Always">
                    <div class="title1">
                        <div class="title2">
                            <h2>Titre</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>

    <!--Article-->
    <article id="article">
        <div id="BlocArticle">
            <div class="BlocBefore">
                <div class="Before">
                    <div class="title1">
                        <div class="title2">
                            <h2>Avant</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="BlocAfter">
                <div class="After">
                    <div class="title1">
                        <div class="title2">
                            <h2>Après</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>

<style>
/******************FONTS**********************/


/***************Box-sizing on all elements***************/
* {
    box-sizing: border-box;
}

/***************************BODY**************************/
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/*************************MAIN*****************************/
a {
    color: #000;
    text-decoration: none;
}

/* BlocMain */
.BlocMain {
    height: 100vh; /* Utilisation de 100vh pour garantir un ajustement vertical fluide */
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 15px;
}

/* Aside (left side) */
#aside {
    width: 30%;
    height: auto; /* Ajustement automatique */
    margin-top: 1.5%;
}

#BlocAside {
    background-color: #e0e0e0;
    height: 100%; /* Adaptation dynamique */
    border: none;
    border-radius: 20px;
}

/* Article (right side) */
#article {
    width: 65%; /* Ajustement pour éviter les débordements */
    height: auto; 
    margin-top: 1.5%;
}

#BlocArticle {
    background-color: #e0e0e0;
    height: 100%;
    border: none;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
}

/* BlocBenefit */
.BlocBenefit {
    width: 100%;
}

/* BlocBefore and BlocAfter */
.BlocBefore, .BlocAfter {
    width: 48%; /* Ajustement des largeurs pour éviter les chevauchements */
}

.BlocBefore {
    border-right: 1px solid #000;
}

/* Before and After */
.Before, .After {
    margin-top: -1px;
}

/* Title */
.Before .title1, .After .title1, .Always .title1 {
    width: 100%;
    padding: 1.5% 0;
    text-align: center;
}

.title2 {
    width: 100%;
    margin: 10px auto 5px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title2 h2 {
    margin-bottom: 8px;
}

/* Media Queries */
@media (max-width: 1350px) {
    #BlocAside, #BlocArticle {
        height: 680px;
    }
}

@media (max-width: 1250px) {
    #BlocAside, #BlocArticle {
        height: 600px;
        width: 100%; /* Adaptation pour un affichage mobile */
    }

    .BlocMain {
        flex-direction: column;
    }
}
</style>

100vh dans .BlocMain permet une hauteur flexible qui occupe toute la vue verticale de l'écran, ce qui est utile pour des designs responsives.

J'ai ajusté la largeur de #aside et #article pour un total d'environ 95% (avec les gap inclus) afin d'éviter les débordements dans les petits écrans.

J'ai ajouté des media queries pour adapter les largeurs et hauteurs sur les écrans plus petits, avec un repli vertical sur les mobiles via flex-direction: column.

Les sections BlocBefore et BlocAfter ont désormais une largeur de 48% pour un meilleur espacement et éviter que les éléments se chevauchent.

J'ai centralisé les titres (h2) pour un alignement plus cohérent sur tous les écrans.

Whaouuuuuuu, ça c'est de la réponse !!!

Mil merci pour ton aide.

Néanmoins, c'est bien ce que j'ai fait pour vérifier le responsive de mon code, avec l'outil "Toggle device toolbar". Je n'utiliserai donc plus la réduction de la taille de mon/mes navigateurs à l'avenir ;-)

J'ai corrigé mon code mais cela ne vas plus du tout mais ce n'est pas ta faute, car je n'ai mis que le code "simplifié au maximum" pour ne pas surcharger le message. C'est une grosse erreur de ma part.

Je t’envoie un message perso avec un lien pour avoir le site complet, afin que ce soit plus juste ;-)

Encore merci ;-)

Bonjour,

Vous pouvez essayer d’ajouter un "reset CSS" qui permet d’uniformiser le comportement des navigateurs en définissant les styles par défaut de manière cohérente.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Cela peut aider à corriger les différences de comportement de certains navigateurs.

Si tu veux un exemple plus spécifique basé sur ton code, tu peux partager la partie concernée pour une analyse plus approfondie.

Merci pour votre aide.

Voici mon code :

<div class="BlocMain">
            <!--Aside-->
            <aside id="aside">
                <div id="BlocAside">
                    <div class="BlocBenefit">
                        <div class="Always">
                            <div class="title1">
                                <div class="title2">
                                    <h2>Titre</h2>
                                </div>
                            </div>
                        </div>
                   </div>         
            </aside>

            <!--Article-->
            <article id="article">
                <div id="BlocArticle">
                    <div class="BlocBefore">
                        <div class="Before">
                            <div class="title1">
                                <div class="title2">
                                    <h2>Avant</h2>
                                </div>
                            </div>
                        </div>    
                    </div>
                    <div class="BlocAfter">
                        <div class="After">
                            <div class="title1">
                                <div class="title2">
                                    <h2>Apr&egrave;s</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
</div>

<style>
/******************FONTS**********************/


/***************Box-sing on all elements***************/
* {
    box-sizing: border-box;
}

/***************************BODY**************************/
body {
    margin: 0;
}

/*************************MAIN*****************************/
a {
    color: #000
}

/* BlocMain */
.BlocMain {
    height: 770px;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap-reverse;
    gap: 15px;
}

/* Aside (left side) */
#aside {

    width: 31%;
    height: 760px;
    margin-top: 1.5%;
}

#BlocAside {
    background-color: #e0e0e0;
    height: 750px;
    margin-top: 1.5%;
    border: none;
    border-radius: 20px 20px;
}

/* Article (right side) */

#article {

    width: 64%;
    height: 760px;
    margin-top: 1.5%;
}
#BlocArticle {
    background-color: #e0e0e0;
    height: 750px;
    margin-top: 0.75%;
    border: none;
    border-radius: 20px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* BlocBenefit*/
.BlocBenefit {
    width: 100%;
}

/* BlocBefore and BlacAfter */

.BlocBefore, .BlocAfter {
    width: 70%;
}

.BlocBefore {
    border-right-width: 1px;
    border-right-color: #000;
    border-right-style: solid;
}

/* Before and After */
.Before, .After {
    margin-top: -1px;
}

/* Title */
.Before .title1, .After .title1 {
    width: 92%;
    padding-top: 1.5%;
    padding-left: 45%;
}

.Always .title1 {
    width: 92%;
    padding-top: 1.5%;
    padding-left: 35%;
}

.title2 {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.title2 h2 {
    margin-bottom: 8px;
}

/* Media Querie >1350px */
@media (max-width: 1350px) {

    #BlocAside {
        height: 680px;
    }
    #BlocArticle {
        height: 680px;
    }
}

/* Media Querie >1350px */
@media (max-width: 1250px) {
    #BlocAside {
        height: 680px;
    }
    #BlocArticle {
        height: 680px;
    }
}

Bonjour,

Je pense au final qu'il s'agit d'une erreur de l'inspecteur de Chrome qui tronque l'affichage de la page web.

Maintenant, je dis peut être une bêtise et la question est donc la suivante :

Lorsque l'on réduit la taille du navigateur par son icône en haut à droite et que l'on réduit donc sa taille d'affichage, est-ce que la taille réelle de la page est aussi réduite ? Si c'est le cas, c'est donc bien l'inspecteur qui bug et mon code n'est donc pas à incriminer...

Merci pour votre réponse