18041 sujets

Questions générales et questions de débutants

Media Queries dans du HTML ?

Hello hello, Smiley biggrin
Voilà je me suis lancé depuis quelques temps dans la création d'un thème wordpress.
Je rencontre un petit problème en ce qui concerne la responsive.
Tout se passait bien, j'utilisais @media dans mon code css pour rendre le design responsive, seulement voilà, le problème vient du HTML.
Voilà mon code (parfait pour ordi) :

<article class="blabla">
<div class="image">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a>
</div>
<div class="categorie"<a href="<?php the_permalink(); ?>"> <?php the_category(); ?></a></div>
<div class="titre"><a href="<?php the_permalink();?>"><?php the_title(); ?></a>
</div>
<div class="extrait"><p> <?php the_excerpt(); ?><a href="<?php the_permalink(); ?>"> Read more... </a>
</div>
</article>

Sur mon ordi c'est l'ordre que je veux : image/catégorie/texte/extrait.
Seulement j'aimerais que sur mon portable ce soit : catégorie/texte/image/extrait.

Ma question est donc, comment faire pour modifier l'ordre lorsque l'utilisateur est sur un portable ?
Est-ce qu'il faut le modifier dans le html ? Dans le CSS ? Comment faire ? Smiley sweatdrop Smiley sweatdrop Smiley sweatdrop
Après avoir lu cet autre magnifique article, tu pourras mettre de l'ordre comme tu veux et de manière plus facile (à mon sens):https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html
En fait, la grille est top pour la structure générale de la page (positionner le header, footer, aside, etc en responsive), puis les flexbox pour agencer les éléments au sein de ces grands ensembles.

Attention: c'est un avis personnel, je pense que d'autres préfèrent être à 100% en flexbox, d'autre 100% en grille, et d'autres à 100% en position: abolute; (non eux ils n'existent plus^^ Smiley biggrin )
<a id="home" href="index.html">Accueil</a>
<a id="top" href="#home">Top</a>


#home, #top {
   position: fixed; right: 1rem;
}
#home { top: 1rem; }
#top { bottom: calc(100vh - 1rem); }

Modifié par bazooka07 (13 Nov 2019 - 15:48)
Sujet clos
Aller à