[Résolu] Problème DIV responsive sur smartphone

  • WordPress :5.0
  • Statut : résolu
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • #2242504
    sanka0579
    Participant
    Initié WordPress
    5 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.1
    • Thème utilisé : Navyblue
    • Extensions en place :
    • Nom de l’hébergeur : Infomaniak
    • Adresse du site : underseainfluence.com

    Problème(s) rencontré(s) :

     

    Bonjour,

    J’ai un petit problème avec un code CSS concernant une DIV responsive:

    Voici le code:

    <div class= »prix »>
    <div class= »gauche »><span style= »color: #ffffff; »>Open Water Diver 1 pers:</span></div>
    <div class= »droite »><span style= »color: #ffffff; »>890.- CHF</span></div>
    <div class= »gauche »><span style= »color: #ffffff; »>Open Water Diver dès 2 pers:</span></div>
    <div class= »droite »><span style= »color: #ffffff; »>850.- CHF</span></div>
    <div class= »gauche »><span style= »color: #ffffff; »>Open Water Diver referal:</span></div>
    <div class= »droite »><span style= »color: #ffffff; »>550.- CHF</span></div>
    </div>

    CSS:

    .prix {
    width: 100%;
    }

    .gauche {
    float: left;
    width: auto;
    }

    .droite {
    float: right;
    width: auto;
    margin-right: 15px;
    }

    @media screen and (min-width:500px) and (max-width:980px)
    {
    .prix {
    width: 100%;
    }
    .gauche {
    float:left;
    width: 65%;
    }
    .droite {
    float: right;
    width: 25%;
    }
    }

    @media only screen and (max-width:500px) {
    .prix {
    width : 100%;
    }
    .gauche {
    float:left;
    width: auto;
    }
    .droite {
    float:right;
    width: auto;
    }
    }

    Le rendu est parfait sur PC, mais sur smartphone, il n’y a que la première ligne qui s’affiche. (voir image jointe).

    Les trois lignes s’affichent si je change le float .droite en none, mais la colonne de droite n’est plus alignée.

     

    Pourriez-vous m’aider  ce sujet?

     

    D’avance merci

     

    #2242517
    ouiouiphoto
    Participant
    Maître WordPress
    882 contributions

    Bonjour

    Il manque la pièce jointe et une adresse ou on peu constater le phénomène serait pas mal aussi 😉

    #2242521
    sanka0579
    Participant
    Initié WordPress
    5 contributions

    Bonjour,

    Oui pas faux..dsl; voici l’adresse:

    Open Water Diver

    La pièce joint était une image du problème, mais trop volumineux.

    Il suffit de charger la page sur smartphone  pour s’en rendre compte…. 😉

    Merci

    #2242525
    ouiouiphoto
    Participant
    Maître WordPress
    882 contributions

    Le problème c’est que je n’ai pas le problème sur Smartphone. Ton prblème est dans Cours de plongé avec les différentes rubrique ou dans l’open water diver. Par contre sur smartphone il y a comme des blocages. Ca charge et ensuite on ne peut plus scroller. Comem sil il mettait du temps a cahrger les images

    #2242604
    sanka0579
    Participant
    Initié WordPress
    5 contributions

    Bonjour,

    Il y a réellement un problème sur smartphone concernant la Div. Cela se situe dans les prix. Il devrait y avoir trois lignes  d’affichées, et il n’y a que le premier article avec son prix. En tout cas sur Androïd.

    Quelqu’un d’autre aurait-il une idée plus précise?

     

    #2242641
    ouiouiphoto
    Participant
    Maître WordPress
    882 contributions

    Ah ben voila. Maintenant j’ai compris ou était le problème 😉 Ca vient de ce style

    #tm_builder_outer_content .tm_pb_blurb.tm_pb_blurb_position_left .tm_pb_blurb_content .tm_pb_blurb_container, #tm_builder_outer_content .tm_pb_blurb.tm_pb_blurb_position_right .tm_pb_blurb_content .tm_pb_blurb_container {
        display: block;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    Et précisément du display : block.  Il faudrait mettre à la place display:inline-block . Soit tu fais un thème enfant et tu modifie le fichier style.css soit tu essaye dans ton code CC personnalisé de mettre le bon code

    #2242667
    sanka0579
    Participant
    Initié WordPress
    5 contributions

    @ouiouiphoto:

    Modification effectuée avec succès, merci beaucoup.

    Bonne fin de journée 😉

    #2242668
    ouiouiphoto
    Participant
    Maître WordPress
    882 contributions

    Parfait 😉

8 sujets de 1 à 8 (sur un total de 8)
  • Vous devez être connecté pour répondre à ce sujet.