1480 sujets

Web Mobile et responsive web design

bonjour,

j'ai voulu utiliser une balise <figure>, avec une image et un figcaption à l'intérieur, comme ceci.


  <figure id="thumb-mas">
    <img src="images/picture.jpg" >
    <figcaption>ici le caption</figcaption>
  </figure>




figure figcaption  { background-color:#C9E4E4;	padding:8px 0;  font-size:1.2em; color:#444; }
figure figcaption  span { display:block; height:30px; font-family:verdana; font-weight:100;  font-size:0.7em; }
figure#thumb-mas  { background-color:#fff; border:1px solid #bbb; border-radius:8px; }
figure#thumb-mas img  { max-width:100%;  border-radius:6px 6px 0 0; }
figure#thumb-mas figcaption  { border-radius:0 0 6px 6px; }

@media only screen and (max-width:599px)  {
    figure#thumb-mas  {  width:90%; max-width:420px;   margin:0 auto; padding:3%;  } 
}



sur un PC, l'affichage est nickel quand je réduis la taille du viewport jusqu'à 320px.

Par contre en testant sur un smartphone Samsung Galaxy S5830, l’affichage est incorrect, on dirait que le figure et le figcaption ne contiennent plus la photo, la taille du figcation est limité à la largueur du texte alors que normalement il s'étend en dessous de la photo sur toute la largeur.

Il y a t-il des problèmes pour afficher cet élément sur un smartphone?
Merci
Lol, ça inspire personne?

j'ai remplacé les <figure> et <figcaption> par des div et cette fois ça s'affiche bien,
c'est bizarre cette histoire......