Bonjour à vous tous,
Mon dernier topic https://forum.alsacreations.com/topic-4-91091-1-Comment-enlever-du-texte-avec-les-CSS-Y.html parlait du "mobile first" (à la fin du topic) et je voudrais savoir comment développer en "mobile first"
J'ai pris en exemple une structure Masonry que j'ai refaite et j'aimerai qu'on m'explique comment structurer le code CSS de sorte qu'il soit orienté "mobile first".
Merci pour votre aide et
que le code soit avec vous !
Voici le code HTML :
Voici le code CSS :
Modifié par ObiJuanKenobi (22 Aug 2024 - 08:46)
Mon dernier topic https://forum.alsacreations.com/topic-4-91091-1-Comment-enlever-du-texte-avec-les-CSS-Y.html parlait du "mobile first" (à la fin du topic) et je voudrais savoir comment développer en "mobile first"
J'ai pris en exemple une structure Masonry que j'ai refaite et j'aimerai qu'on m'explique comment structurer le code CSS de sorte qu'il soit orienté "mobile first".
Merci pour votre aide et
que le code soit avec vous !
Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Projet</title>
</head>
<body>
<main>
<section>
<div class="container">
<div>
<img src="http://placehold.it/350x150" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Premier titre</h2>
<p>
Le tramway jaune avance lentement dans le brouillard laiteux et surchauffé de cette fin d’après midi d’été. Le trafic s’écoule sous la canicule, se disperse et se répand dans les mille recoins de Budapest. La ville piétine et les enfants assiègent les marchands de glace. La voiture passe au loin, tourne sur les grands boulevards, longe une avenue et débouche sur le pont Elisabeth. Suspendu dans le vide, acrobate au fil des ans et de l’eau qui passent, le monument traverse le fleuve en une enjambée majestueuse, rétablissant le lien séculaire entre la ville bourgeoise de Pest et les collines royales de Buda.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x220" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Second titre</h2>
<p>
Sous le pont passe un hydroglisseur, il arrive de Vienne enrobé d’un cocon d’argent, milliards de gouttes d’eau qui brillent dans l’air surchauffé, d’où émergent en virevoltant les mouettes
du Danube.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x300" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Troisième titre</h2>
<p>
On découvre alors la Ville, avec comme seul garde-fou les remparts de la fortification.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x120" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Quatrième titre</h2>
<p>
Sous le pont passe un hydroglisseur, il arrive de Vienne enrobé d’un cocon d’argent, milliards de gouttes d’eau qui brillent dans l’air surchauffé, d’où émergent en virevoltant les mouettes
du Danube.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x100" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Cinquième titre</h2>
<p>
Les touristes y sirotent un peu de fraîcheur palpable qui vient des raisins du mont Tokaj.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x230" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Sixième titre</h2>
<p>
On se perd alors dans les rues médiévales du Château, à la rencontre de l’inconnu, du vin qui
enivre, de la musique qui enchante, et de la cuisine parfumée au paprika.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x150" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Septième titre</h2>
<p>
Les violons jouent en sourdine autour des tables et les costumes du pays dansent la sarabande au rythme endiablé du Csárdás.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x300" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Huitième titre</h2>
<p>
On se perd alors dans les rues médiévales du Château, à la rencontre de l’inconnu, du vin qui enivre, de la musique qui enchante, et de la cuisine parfumée au paprika.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x100" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Neuvième titre</h2>
<p>
Les violons jouent en sourdine autour des tables et les costumes du pays dansent la sarabande au rythme endiablé du Csárdás.
</p>
</article>
</div>
<div>
<img src="http://placehold.it/350x350" alt="Pour le moment, il n'y a pas d'image">
<article>
<h2>Dixième titre</h2>
<p>
Tout Budapest est là, séparée en deux par le large ruban argenté du Danube. Au nord, on devine l’île Marguerite, ses palaces et ses piscines. Les touristes y sirotent un peu de fraîcheur palpable qui vient des raisins du mont Tokaj.
</p>
</article>
</div>
</div>
</section>
</main>
</body>
</html>Voici le code CSS :
*{
margin: 0;
padding: 0;
}
html{
line-height: 145%;
font-size: 1.125rem;
}
body {
background-color: var(--vertclair);
color: var(--gris);
}
section > h1{
margin-bottom: -1rem;
}
article > h2 {
font-size: 1.5rem;
color: var(--vertmoyen);
font-size: 1.2rem;
font-weight: 300;
}
article > p {
text-align: justify;
hyphens: auto;
color: var(--grisfonce2);
}
.container {
column-count: 4;
column-gap: 1rem;
padding: 0 1rem;
}
.container > div {
display: inline-block;
width: 100%;
margin-top: 1rem;
}
.container > div img {
width: 100%;
display: block;
border-radius: 1rem 1rem 0 0;
}
.container > div > article {
display: block;
padding: 1rem;
background-color: var(--blanc);
border-radius: 0 0 1rem 1rem;
}
/* Responsive */
@media screen and (max-width: 768px) {
.container {
column-count: 2;
}
}
@media screen and (max-width: 480px) {
section > h1{
margin-bottom: 0;
}
.container > div img {
border-radius: 0;
}
.container > div > article {
border-radius: 0;
}
.container {
column-count: 1;
padding: 0;
}
.container > div {
margin-top: 0;
}
}
/* Variables */
:root {
--blanc: #f8f8f8;
--vertfonce: #858330;
--vertclair: #93b874;
--verttresclair: #ced57f;
--vertmoyen: #5f8344;
--jaune: #f5c102;
--gris: #444;
--grisfonce1: #333333;
--grisfonce2: #4d4d4d;
--rougeclair: #e2270f;
--rougefonce: #b40d02;
--bleugris1: #4a6fa5;
--bleugris2: #5f7285;
--brunchaud1: #5d4037;
--brunchaud2: #4e342e;
}Modifié par ObiJuanKenobi (22 Aug 2024 - 08:46)