bonjour,
j'ai voulu utiliser une balise <figure>, avec une image et un figcaption à l'intérieur, comme ceci.
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
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