Probleme CSS non pris en charge navigateur mobile

Question

joban91

8 Jun 2020 à 17:23

Bonjour a toutes et a tous,

Je suis un développeur Junior et sa va presque faire deux semaines que je galère sur un sujet. Mon code marche très bien pour la version desktop et sur tout les navigateurs (Chrome, EI, Firefox, Edge).
Par contre quand je veut visualiser ma page sur mobile tout marche bien sur safari mais pour se qui est de Firefox et chrome c'est la catastrophe.
j'ai l'impression qu'il y'a des classe de mon CSS qui ne sont pas pris en charge. Par contre quand je met les style en mode inline dans ma page html tout fonctionne bien, bizarre tout sa !!!

En espérant qu'un sauveur pourra m'aider a trouver une solution. je vous met en dessous mon code html et css.

Bon journée tout le monde.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:image" content="img/photo_roger.jpg">
    <meta name="image" content="img/photo_roger.jpg">
    <meta name="description" content="Location d'imprimantes et photocopieurs,
    Location et vente de matériel informatique,Téléphonie Voip et débit internet,Solutions de commutation" />
  
    

    
    <title>Roger Duarte : Directeur Commercial - Axium Solutions </title>

    <link rel="shortcut icon" href="img/logo2.jpg" type="image/jpg"/>
    <link rel="icon" href="img/logo2.jpg" type="image/jpg"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" media="screen" type="text/css" href="style.css">

</head>
<body>
    

<div class="carte_visite_recto_verso" >
    <div class="carte carteModeRecto" >
        <div class="couche recto" >                      <!--DEBUT DU MODE RECTO-->
            <div class="logo">
                <img src="img/logo.jpg" alt="" class="imglogo"  >
            </div>

            <div>                                                                           <!--PHOTO DU CLIENT-->
                <div id="photoprofil2">
                    <div id="photoprofil"></div>
                </div>
            </div>
            <div class="nom" >  
                Roger Duarte
            </div>
            <div class="statu" >
                Directeur Commercial
            </div>
                <a href="download/vcard_roger.vcf"  download>
                    <div class="buton2">
               
                        <img src="img/ico_download.jpg" alt="" class="imgbutton">
                        <div class="buttontext2" > Télécharger le contact</div>
                    </div></a>

                        <div class="buton" 
                        onclick="$(document).find('.carte').toggleClass('carteModeVerso');
                        $(document).find('.carte').toggleClass('carteModeRecto');">

                            <img src="img/ico_partage.jpg" alt="" class="imgbutton2" >
                                <div class="buttontext"  >Partager</div>
                        </div>
        
                        <div class="info">
                            <div class="ligneinfo" >
                                <img src="img/ico_mobile.jpg" alt="" class="iconinfo">
                                    <a href="tel:+33184008621"><div class="texte">01 84 00 86 21</div></a>
                            </div>

                            <div class="ligneinfo" >
                                <img src="img/ico_phone.jpg" alt="" class="iconinfo">
                                    <a href="tel:+33662682503"><div class="texte">06 62 68 25 03</div></a>                  <!--ZONE INFORMATION-->
                            </div>

                            <div class="ligneinfo" >
                                <img src="img/ico_sms.jpg" alt="" class="iconinfo">
                                    <a href="sms:+33662682503"><div class="texte">SMS</div></a>
                            </div>

                            <div class="ligneinfo" >
                                <img src="img/ico_mail.jpg" alt="" class="iconinfo">
                                    <a href="mailto:Roger.duarte@axiumsolutions.fr"><div class="texte" >Roger.duarte@axiumsolutions.fr</div></a>
                            </div>
           
                            <div class="ligneinfo" >
                                <img src="img/ico_web.jpg" alt="" class="iconinfo">
                                    <a href="http://www.axiumsolutions.fr"><div class="texte">www.axiumsolutions.fr</div></a>
                            </div>
            
                            <div class="ligneinfo" >
                                <img src="img/ico_adresse.jpg" alt="" class="iconinfo" >
                                    <a href="https://goo.gl/maps/HdY48H9MVqRsX3KR9"><div class="texte" style="text-align: left;" >Immeuble Point Cardinal <br>
                                                                                                                            31 Avenue Pierre Brossolette <br>
                                                                                                                                91380 CHILLY MAZARIN</a>
                            </div>
                        </div>
            
        </div>
    
        <div class="reseaux" >
                <div class="ligneinfo" >
                    <img src="img/ico_linkedin.jpg" alt="" class="iconinfo">
                        <a href=""><div class="texte">Linkedin</div></a>
                </div>

                <div class="ligneinfo" >                                                                  <!--ZONE RESEAUX SOCIAUX-->
                    <img src="img/ico_fb.jpg" alt="" class="iconinfo">
                        <a href=""><div class="texte">Facebook</div></a>
                </div>
        </div>                                                                                            <!--FIN MODE RECTO-->
    </div>       
    
   
	                <div class="couche verso">                                                           <!--DEBUT MODE VERSO-->

                    <div class="logo" >
                        <img src="img/logo.jpg" alt="" class="imglogo"  >
                    </div>

                        <a href="vcard_roger.vcf"  download>
                        <div class="buton2" >
                            <img src="img/ico_download.jpg" alt="" class="imgbutton" >
                                <div class="buttontext2" >Télécharger le contact</div>
                        </div></a>

                        <div class="buton2">
                            <img src="img/ico_mail2.jpg" alt="" class="imgbutton">
                                <div class="buttontext2"   >Partager Par Mail</div>                     <!--ZONE DE PARTAGE-->
                        </div>

                        <div class="buton2" >
                            <img src="img/ico_whatsapp.jpg" alt="" class="imgbutton" >
                                <div class="buttontext2">Partager par Whatsapp</div>
                        </div>

                        <div class="buton2" >
                            <img src="img/ico_copier.jpg" alt="" class="imgbutton">
                                <div class="buttontext2"  >Copier le lien</div>
                        </div>

                        <div  class="buton" 
                        onclick="$(document).find('.carte').toggleClass('carteModeVerso');
                        $(document).find('.carte').toggleClass('carteModeRecto');">
                            <img src="img/ico_retour.jpg" alt="" class="imgbutton2">
                                    <div class="buttontext" >Retour</div>
                        </div>

                        <div class="qrcode" >
                            <img src="img/qr_code.jpg" alt="" class="imgqr" >
                        </div>                                                                                                               <!--FIN DU MODE VERSO-->
    </div>
</div>

</body>

</html>

CSS:

body{
  background-image: url('img/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  font-family:Arial,Helvetica,sans-serif;
  height: 1500px;
  margin: 0px;

}
.verso{
  
  width: 370px; 
  height:950px ; 
  margin-bottom: 0px;
}


.carteModeRecto{

  text-align: -moz-center;
  -webkit-box-align: center;
  width:100%;
  max-width: 370px; 
  text-align: left;
  margin:auto;
 text-align: -webkit-center;
}
.recto,.verso{
    text-align: -webkit-center;
    text-align: -moz-center;
    text-align: -ms-center;
    margin-bottom: 50px;
    overflow: hidden;
    margin-top: 50px;
   background-color: white;
    box-shadow: 1px 1px 5px 1px black;
    
}

#photoprofil{
    background-image: url("img/photo_roger.jpg");
    width: 238px;
    height: 240px;
    border-radius: 150px;
    margin-top: 11px;
    text-align: left;
    margin: auto;
    margin-top: 11px;
    text-align: left;
    margin: auto;
}

#photoprofil2{
    border: 3px solid #e5e5e5;
    width: 260px;
    height: 250px;
    border-radius: 150px 150px;
    text-align: left;
    margin: auto;
    padding-top: 10px;
    text-align: left;
    margin: auto;
    padding-top: 10px;
    height: 250px;
}

.ligneinfo{
    display: flex;
    margin-top: 7px;
}

.buton,.buton2{
        display: flex;
        cursor: pointer;
        background-color: #ca3439;
        text-align: center;
        border-radius: 10px;
        color: white;
        text-align: left;
        margin:0  auto;
        outline: none;
        border: none;
        border: 2px solid #cb353b;
        width: 280px;
  height: 52px
}

.buton{
  margin-bottom: 30px;
  width: 280px;
  height: 50px;
}

.buton2{
  background-color: white;
  color: #2e4158;
  text-align: left;
  margin:0  auto;
  margin-bottom: 30px;
   
}

.down{
  margin-top: 8px;
}

.partag{
  margin-top: 4px;
  width: 42px;
  height: 43px;
}

.qrcode{
    border: 2px solid #cb353b;
    border-radius: 10px;
    margin-top: 50px;
}

.buttontext2,.buttontext{
      color: #2e4158;
      margin-top: 15px;
      font-size: 1em;
        
}

.buttontext{
        color: white;
}
    
.imgbutton,.imgbutton2{
        margin-left: 20px;
        height: 42px;
        width: 58px;
        margin-right: 20px;
        margin-top: 8px;
}
.imgbutton2{
  height: 42px;
  width: 43px;
  margin-top: 5px;
}

.info{
       
        margin-left: 35px;
}
   
.nom,.statu{
        font-size: 1.6em;
        color: #2e4158;
        margin-top: 40px;
        text-align: center
}

.statu{
       margin-bottom: 30px;
       margin-top: 0px;
}

.texte{
        margin-top: 5px;
        margin-left: 10px;
        color: #2e4158;
        font-size: 1.2em;
}
.carte{
  text-align: -moz-center;
  -webkit-box-align: center;
  width: 370px; 
  text-align: left;
  margin:auto;
  text-align: -webkit-center;
}

.carte_visite_recto_verso {

	    -webkit-perspective: 740px;   
        perspective: 740px;
        margin-top: 50px;
     
}

.carte_visite_recto_verso .carte {

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
                    
}

.carte_visite_recto_verso .carte .couche {
                      
        margin:0px !important;
        -webkit-transition: 1s;
        transition: 1s;
        -webkit-backface-visibility: hidden ;
        backface-visibility: hidden ;
                    
}

.carte_visite_recto_verso .carte .recto {
        position: absolute;
        z-index: 1;
                    
}

.carte_visite_recto_verso .carteModeRecto .recto {
        -webkit-transform: rotatey(-0deg);
        transform: rotatey(-0deg);
                    
}
                    

.carte_visite_recto_verso .carteModeRecto .verso {
        -webkit-transform: rotatey(-180deg);
        transform: rotatey(-180deg);
                    
}

.carte_visite_recto_verso .carteModeVerso .recto {
        -webkit-transform: rotatey(+180deg);
        transform: rotatey(+180deg);
                    
}
                    
.carte_visite_recto_verso .carteModeVerso .verso {
        -webkit-transform: rotatey(0deg);
        transform: rotatey(0deg);
                    
}
      

a{
    text-decoration: none;
    color: #2e4158;

}

.iconinfo{
          height: 29px;
          width: 25px;
}

.logo{
    width: 370px;
    padding-top: 30px;
    margin-bottom: 20px;
    text-align: -webkit-center;
}

.reseaux{

  text-align: left;
  margin:0  auto;
  margin-left:35px; 
  margin-top: 60px;
  padding-bottom: 70px;
} 

.qrcode{

  text-align: left;
  margin:0  auto;
  width: 280px;
  height: 330px;
}

.imgqr{
  text-align: left;
  margin:0  auto;
  margin-left: 45px;
  padding-top: 60px;
}
.imglogo{
  width: 300px;
}

vzytoi

8 Jun 2020 à 23:27

Coucou, Firefox et Chrome sur ton ordinateur marchent correctement?

Sujet clos

CSS et mise en forme, CSS3

Probleme CSS non pris en charge navigateur mobile