Probleme de taille de l'ecran

unowx
Les bases HTML/CSS

Bonjour,

j'ai un grand probleme sur mon site svp j'ai vraiment besoin d'aide voila sa fait un moment que je code sur css et j'ai eu un probleme au niveau de zoom ou de la taille des ecrans on ma proposé de mettre un viewport je l'ai mis mais sa ne marche toujours pas le probleme c'est que quand je met le site sur un petit ecran le bloc d'image se deplace sur le text mais par contre sur mon grand ecran l'image ne bouge pas
sa reste stable je voulais savoir si ya un moyenne de regler se probleme je vous ai mis un shema https://user.oc-static.com/upload/2017/11/01/15095168551186_Sans%20titre.png et le code css/php pour mieux comprendre enfin j'espere merci 

<div class="coverpadx">
<a href="profile.php?id=<?= get_session('user_id')?>">
<img src="<?= $user->bannier ? $user->bannier : get_bannier_url($user->email, 100) ?>" alt="Image de couverture de <?= e($user->pseudo) ?>" data-lightbox="#" width="100%;"
height="100px;">
</a>

 </div><br><br>

 .coverpadx{ code de l'image
  position: absolute;
margin-left:22%;
margin-top: 76px;
height: 150px;
width: 250px;
top:10px;
margin-bottom: 5em;

}

5 réponses

Med-

le width que tu as mis est en pixel tu dois travailler avec les pourcentages , je te conseille d' utiliser le bootstrap i va vraiment t aider

caveira

Je pence que le responsive de ton site serais bon a faire il resouderais la majeur partie de ton probleme tu trouvera des tutoriels sur la chaine youtube du forum

humanoid89

As-tu essayer de faire un float : left a ton image pour qu'il soit situer à gauche de ton texte ?

Onpeutsarranger

Salut,

Si tu veux que ça soit toujours côte à côte, tu n'as qu'à mettre un display:inline-block. Avec une largeur de 50vw ou 50% tout dépend de la largeur que tu veux. Et sinon oublie de coder en px, il existe des unités qui réagissent bien à la largeur de l'écran pour que tu puisses avoir quelque chose d'uniforme sur l'ensemble des devices.

Belle journée,

Valentin

TokaLazy

Salut

Est-ce que tu souhaites que l'image et le texte prennent la même largeur, si c'est le cas tu as a ta disposition les flex-box, ou la méthode de @Onpeusarranger avec les inline-block ?
Si tu pars sur du inline-block, je te conseil les % plutot que que vw.

Si tu n'as pas besoin que les 2 éléments fassent la même largeur tu peux mettre un float: left sur ton image (en precisant une max-width).