17204 sujets

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

Media Queries dans du HTML ?

10 Nov 2019 à 21:19
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
12 Nov 2019 à 10:06
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 )
13 Nov 2019 à 12:42
Mathieu8337 a écrit :
et d'autres à 100% en position: abolute; (non eux ils n'existent plus^^ Smiley biggrin )

Heu moi je veux bien mais souvent sur mes sites en scroll j'aimes bien conserver un DIV avec un tout petit bouton Home
et tout en bas à droite un DIV avec un tout petit bouton Haut de page....
Tu fait comment, je suit en HTML5 et ça m'intéresse Smiley cligne
13 Nov 2019 à 15:47
<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)
13 Nov 2019 à 20:45
bazooka07 a écrit :
&lt;a id="home" href="index.html"&gt;Accueil&lt;/a&gt;
&lt;a id="top" href="#home"&gt;Top&lt;/a&gt;


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

Trop simple et efficace mille mercis ! Smiley cligne
Prévenir un modérateur
Répondre au sujet
Aller à