Bonjour,
Thème: adaptation d'un site web pour mobile
Je souhaite qu'une image (comprise dans un <div>):
- n'apparaisse pas sur écran ordinateur
- apparaisse sur un écran mobile
Le codage que j'applique ne fonctionne qu'a moitié:
- l'image n'apparait pas sur écran ordinateur
- l'image n'apparait pas sur un écran mobile: comment faire pour qu'elle apparaisse sur mobile?
Cordialement
html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="cssatelier2bis.css" /> <meta name="viewport" content="width=device-width"/> </head> <body> <div id="photoacceuil"> <img src="bebe.jpg" style="height:174px; width:132px;"/> <div/> </body> </html>
css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 #photoacceuil{ display: none !important; } @media screen and (max-width: 800px), handheld and (max-width: 800px){ #photoacceuil{ position:absolute; height:174px; width:132px; top:20%; left:30%; } }
Partager