Tell us what’s happening:
Hello! So my code passes the challenge (satisfies all the tests) but I want to fix up the aesthetics a bit. There is too much empty space underneath my article.feature-article and article.secondary-article.
How do I collapse this so that it’s not so spread out and there is less white space, but still satisfy the tests? For example, if I set grid-template-rows: auto; then it fixes my white space but fails the tests.
Thank you!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Newspaper Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="newspaper-layout">
<header class="title">
<h1>Le Quotidien Pain</h1>
<p class="sub-newspaper-title">Les nouvelles de "<a href="https://francaisfacile.rfi.fr/fr/">français facile avec rfi</a>".</p>
</header>
<article class="feature-article">
<h2>Grosse chaleur en mer Méditerranée</h2>
<p>Dans l'actualité européenne, des Européens qui ont chaud, très chaud. Après les habitants du sud de l'Europe, ce sont les habitants du nord de l'Europe qui transpirent, qui suent de chaleur. Jusqu'à 40 °C prévus, aujourd'hui, en Allemagne. Alors, la canicule concerne, certes, les humains, mais aussi la nature. Exemple : en mer Méditerranée, l'eau a atteint 26 °C, hier. Reportage à Marseille, signé Eliza Amouret.</p>
</article>
<figure class="cover-image"><img src="https://s.francaisfacile.rfi.fr/media/display/f4cc5816-58c6-11f0-9878-005056a90284/w:1024/p:16x9/000-17Y36V-1920.webp" alt="school of fish"></figure>
<article class="small-article1">
<h3>Amazon, le géant du commerce en ligne, au tribunal</h3>
<p>La suite de ce journal, avec cette actualité judiciaire aux États-Unis. Un géant du commerce en ligne sur le banc des accusés. Autrement dit le procès d'Amazon s'est ouvert, aujourd'hui, à Seattle. L'entreprise est accusée de pratiques commerciales illégales – contraires à la loi. Nathanaël Vitrant, bonjour.</p>
<p>Bonjour, Adrien. L'accusation est partie de la FTC, comprenez le puissant gendarme de la concurrence aux États-Unis.</p>
</article>
<article class="small-article2">
<h3>France: les nouveautés de la rentrée scolaire</h3>
<p>L'actualité en France, rythmée, aujourd'hui, par la rentrée scolaire. Fini les vacances : 12 millions d'élèves français ont repris [le] chemin des classes, ce matin. Alors, à chaque rentrée des classes, il y a des nouveautés. Certes, on rencontre un nouvel ami, un nouveau camarade, un nouveau professeur. Mais il y a aussi d'autres changements, comme par exemple au collège. Le téléphone portable doit, désormais, être rangé avant d'entrer dans l'établissement scolaire. Et puis au lycée, aussi. Pour obtenir le baccalauréat, le contrôle continu au bac change. Les notes obtenues tout au long de l'année vont, désormais, représenter 40 % de la note à l'examen. Explications, Laurence Théault.</p>
</article>
<article class="small-article3">
<h3>L'Espagne face aux incendies</h3>
<p>Ce triste record en Espagne sans doute lié, là aussi, au changement climatique. Depuis le début de l'année, les incendies ont brûlé plus de 343 000 hectares de terres. C'est du jamais-vu dans le pays. Et ce chiffre continue d'augmenter. De nombreux mégafeux touchent l'Espagne depuis le début du mois d'août, en particulier dans le nord-ouest et l'ouest du pays. Les flammes qui ont aussi causé la mort de quatre personnes. Les autorités recherchent de possibles incendiaires, celles et ceux qui ont allumé certains feux, que ce soit par accident ou de manière criminelle. Et dans les villages concernés par les incendies, les théories vont bon train. C'est un reportage d'Élise Gazengel.</p>
</article>
<article class="secondary-article">
<h2>Vaccination des enfants: un bilan alarmant</h2>
<p>À la page santé. Après des années de progrès, les enfants sont de moins en moins protégés contre les maladies graves. Autrement dit, la vaccination des enfants contre les maladies potentiellement mortelles diminue dans le monde. C'est ce qui ressort d'une étude publiée, aujourd'hui, dans le journal The Lancet. Christina Okello, des millions d'enfants vivent, aujourd'hui, sans protection contre des maladies comme la rougeole, la polio ou le tétanos ; maladies, pourtant, évitables s'ils avaient été vaccinés. Christina, l'Afrique est particulièrement concernée.</p>
</article>
</main>
</body>
</html>
/* file: styles.body {
background-color: #f8f3e9;
color: #24162b;
font-family: Georgia, serif;
text-align: justify;
}
.newspaper-layout {
min-width: 750px;
max-width: 1000px;
margin: 0 auto;
box-shadow: 6px 6px 25px rgba(0,0,0,0.6);
padding: 1rem 3rem 4rem;
box-sizing: border-box;
position: relative;
display: grid;
grid-template-areas:
'title title title'
'feature-article feature-article cover-image'
'secondary-article secondary-article cover-image'
'small-article1 small-article2 small-article3'
;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr 1fr 1fr;
gap: 0.5em;
}
article {
padding: 0 1em;
}
article p {
color: #4c4541;
line-height: 1.5em;
}
article > p:first-of-type::first-letter {
font-size: 2em;
float: left;
}
/* decided to just use a simple colour for simplicity */
a {
text-decoration: none;
color: rgba(36, 22, 43,0.8);
font-weight: 800;
}
.cover-image {
margin: 0;
grid-area: cover-image;
}
.cover-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(80%);
}
/* for a photo of newsprint to use as texture
body::before {
content: "";
height: 100%;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url(https://images.unsplash.com/photo-1604147706283-d7119b5b822c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
filter: brightness(101%) blur(1px);
z-index: -1;
}
*/
.title {
grid-area: title;
text-align: center;
}
h1 {
font-size: 48px;
margin-bottom: 0;
}
.feature-article {
grid-area: feature-article;
}
.secondary-article {
grid-area: secondary-article;
}
.cover-image {
grid-area: cover-image;
}
.cover-image img {
max-width: 100%;
}
.small-article1 {
grid-area: small-article1;
}
.small-article2 {
grid-area: small-article2;
}
.small-article3 {
grid-area: small-article3;
}
.sub-newspaper-title {
font-style: italic;
}
css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Design a Newspaper Layout - Design a Newspaper Layout
