1427 sujets

Web Mobile et responsive web design

Bonjour à tous, je développe mon site web et je rencontre un petit soucis concernant un tableau. Je vous explique, j'ai créé un tableau pour aligner deux vidéos l'une a l'autre
<table  id="table1">
<tr><th>
<h1 id="video_tableau"><center><b>Voila quelques mots du chef de notre association:</b></center></h1>
<div class="video-container">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/jjBZelfTsu8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</th>
<th>
<h1 id="video_tableau"><center><b>L'appel du 18 décembre 2020</b></center></h1>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/H7bXoS2SuyM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</th>
</tr>
</table>

Et je souhaiterais que sur smartphone, les deux cellules se mette à la verticale ainsi que la police diminue, voici mon code CSS:
h1{background-color: #333; color: #fff; font-family: 'Zilla Slab', serif; margin:0; margin-bottom:50px}
@media only screen and (max-width: 1080px) {
#video_tableau {font-size: 20%}
#table1, td{"je n'ai aucune idée de quoi mettre ici"}}

La dessus rien ne fonctionne alors que la méthode
@media only screen and (max-width: 1080px) {}
fonctionne pour d'autres endroit ou j'ai pu l'utiliser
Avez vous des solutions?
merci d'avance
Modifié par YanisL (31 Dec 2020 - 16:45)
Administrateur
Hello,

Rien ne t'empêche de simplement jouer sur les valeurs de display et de remplacer ton "je n'ai aucune idée de quoi mettre ici" par un display: block Smiley cligne

En bonus, tu trouveras quelques autres astuces ici : https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html

Bon courage ! Smiley smile

PS : ta Media Query n'est pas prise en compte car tu n'as pas fixer le Viewport (cf. lien que je t'ai donné)
Modifié par Raphael (31 Dec 2020 - 10:50)
Meilleure solution