synchroniser l'apparence sur les différents écrans

[Laférosse]

Bonjour, j'aimerai améliorer l'affichage sur les versions mobil :  Iphone  IOS sur Safari et sur Samsung avec Android sur Google Chrome et peut-être d'autres. ..?

C'est la cata sur l'affichage dans le bloc accueil.

Iphone sur Safari (avec version ordi cochée/Même affichage en version mobil classique)



Samsung Android Google Chrome (avec option ordi cochée)



Voici ce que j'ai sur mon ordi et que j'aimerai obtenir sur tous les supports.  Merci par avance.

[chattigre]

Bonjour,

Sur la div suivante

Code:

<div style="position:relative;width:750px;height:95px;background: #ffffff; border: 3px #000000 solid ; font-family: Roboto; color: #000000; text-align: center; font-size: 20px; padding:10px;box-sizing:border-box;margin:auto; border-radius: 2px;">
                                                                                                                                                                 Tu veux faire partie de la communauté Bubble Gum ? Rien de plus simple !<br> Crée un profil et retrouve tes amis sur les différents salons de discussion.<br>Clique ici⇾ <a target="_blank" href="https://bubblegum.forumactif.com/register"><img src="https://zupimages.net/up/23/26/ax9q.png"></a>                                                                                                                                                 
   <div style="position:absolute;top:-145px;right:-90px;">
                                                                                                                                                                    <a href="https://bubblegum.forumactif.com/register"><img src="https://zupimages.net/up/23/27/c1q6.png" alt="Bubble Gum C1q6" title="Je suis une bubblegum !" style="width: 229px; height: 250px;"></a>                                                                                                                                                               
   </div>
</div>

Remplacez

Code:

 style="position:relative;width:750px;height:95px;background: #ffffff; border: 3px #000000 solid ; font-family: Roboto; color: #000000; text-align: center; font-size: 20px; padding:10px;box-sizing:border-box;margin:auto; border-radius: 2px;"

par

Code:

 style="position:relative;max-width:750px;min-height:95px;background: #ffffff; border: 3px #000000 solid ; font-family: Roboto; color: #000000; text-align: center; font-size: 20px; padding:10px;box-sizing:border-box;margin:auto; border-radius: 2px;"

Cela devrait éviter d'avoir des débordements sur mobile

Bonne journée
Cordialement

[Laférosse]

Merci beaucoup chattigre l'apparence surtout sur Safari est beaucoup mieux, c'est déjà plus présentable. Concernant l'image de gauche, peut-on aussi la voir bien à gauche comme sur mon ordi svp ? Merci.



sur mon mobil Android Google Chrome



Pour l'image de l'oiseau j'ai ajouté cette partie au code.

Code:

<div style="position:absolute;top:185px;left:355px;">
                                                                                                                                                                                                                                                               <a href="https://bubblegum.forumactif.com/register"><img style="width: 71px; height: 90px;" title="Cui cui !" alt="" src="https://zupimages.net/up/23/27/vbin.png" /></a>                                                                                                                                                                                                                       
</div>

[chattigre]

Bonjour,

Ce que vous allez faire, c'est déplacer la div de l'oiseau à l'intérieur de la div "principale" qui est en position:relative au lieu d'à l'extérieur comme actuellement.

Et remplacer l'ouverture de la div de l'oiseau par (changements dans l'attribut style)

Code:

<div style="position:absolute;top:10px;left:-30px;transform: translateY(-100%);">

Cela devrait correspondre à vos attentes

Bonne journée
Cordialement

[Laférosse]

Bonjour chattigre, merci. Je ne sais pas si j'ai bien compris pour la div mais l'image n'apparait pas.

[chattigre]

Bonjour,

Non, ça donne plutôt ce code :

[Laférosse]

Désolée mais je suis perdue. Je n'arrive pas à mettre le code complet avec les deux images.

Oup's, si je ne mets pas le code en entier...Mes excuses, je suis tête en l'air. Merci beaucoup chattigre. Ca marche.