Image au dessus en responsive

Par nlefebvre, il y a 9 ans

Les bases HTML/CSS

Bonjour,
j'ai un block avec une image a droit et le texte a gauche en boostrap et le block suivant et a l'inverse.
Mon PB et que quand je suis en version mobile les images se touche alors que j'aimerai qu'il est dans le block l'image en haut et le texte en bas pour les deux blocks.
Voici le code:

<div class="container white"> <div class="row"> <div class="col-md-6"> <a href="#"> <div class="blockprix center-block"><p>A PARTIR DE <span>100€</span> <br>LA NUIT</p></div> <img class="img-responsive img-hover " src="images/gallery/11.jpg" alt=""> </a> </div> <div class="col-md-6 mt50"> <h5>EN DEUX MOTS</h5> <h1>HÔTEL PERON</h1> <hr> <p>Un hôtel de charme vue mer à dimension humaine proche du Palais du Pharo et du MuCem Que ce soit pour un week-end, pour vos congrès,pour des vacances à Marseille, Que ce soit pour assister à un match de l'Olympique de Marseille ( OM) au stade Vélodrome, Venez vivre un bon moment de dépaysement et de détente culturelle ou sportive dans notre hôtel, l'un des rares hôtels deux étoiles de Marseille situé directement en front de mer . </p> <button id="singlebutton" name="singlebutton" class="btn btn-red center-block"> EN SAVOIR + </button> </div> </div> <div class="row"> <div class="col-md-6 mt50"> <h5>EN DEUX MOTS</h5> <h1>HÔTEL PERON</h1> <hr> <p>Un hôtel de charme vue mer à dimension humaine proche du Palais du Pharo et du MuCem Que ce soit pour un week-end, pour vos congrès,pour des vacances à Marseille, Que ce soit pour assister à un match de l'Olympique de Marseille ( OM) au stade Vélodrome, Venez vivre un bon moment de dépaysement et de détente culturelle ou sportive dans notre hôtel, l'un des rares hôtels deux étoiles de Marseille situé directement en front de mer . </p> <button id="singlebutton" name="singlebutton" class="btn btn-red center-block"> EN SAVOIR + </button> </div> <div class="col-md-6"> <a href="#"> <div class="blockprix center-block"><p>A PARTIR DE <span>100€</span> <br>LA NUIT</p></div> <img class="img-responsive img-hover " src="images/gallery/10.jpg" alt=""> </a> </div> </div> </div> </div>

Meric d'avance pour votre aide.

1 réponse

Nairolf, il y a 9 ans

A vrai dire si tu met pas ton CSS, il est difficile de savoir comment tu as mis en place tes images (float ou position absolute).

Mais avec ton code tu auras déjà un problème, c'est que si tu veux que l'images soit avant le texte, faut que ça soit pareil en HTML, donc ton deuxième bloc aura un soucis, enfin je dis ça c'est pour ne pas ajouter trop de CSS inutile.

Ensuite vu comment tu as coder, je présume que tu n'utilises pas de float, car juste avec un float: left et right pour placer les éléments e; temps normal tu auras ce que tu veux et un float: none; en responsive pour que les éléments se placent de la même façon qu'ils apparaisent dans le flux.