Design a Magazine Layout - Design a Magazine Layout

HTML-CSS
1

Tell us what’s happening:

Can’t get over autotests. Stuck on these points:
7. Your .magazine-cover should have a grid-template-areas property with title spanning all three columns of the first row.
Failed:8. The second row of the grid template should contain a feature article spanning two columns and a cover image.
Failed:9. The third row of the grid template should contain small-article1, small-article2, and cover-image.
I can’t get what’s wrong in my code.

Your code so far

<!-- file: index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<title>Magazine Layout</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<main class="magazine-cover">
  <header class="title">
    <h1>Why you should hold your breath and try freediving in Taiwan</h1>
    </header>
  <section class="feature-article">
    <h2>Freediving is the art </h2>
    <p><p>Freediving is the art of diving underwater on one breath, sometimes to depths of hundreds of feet. Spearfishers and seafood gatherers, such as Japan’s ama and Korea’s haenyeo, have been freediving for centuries, but an increasing number of divers around the world are joining the practice for fun and sport.</p> 
  </section>
  <section class="small-article1">
    <h2>An absourd fact about Taiwanese</h2>
    <p>This boom is meaningful because, despite being an island, most Taiwanese don’t know how to swim. Reasons include a superstitious fear of the ocean and previously restricted coastlines under martial law for over 40 years.</p>
  </section>
  <section class="small-article2">
    <h2>Why is Taiwan a mecca for freediving?</h2>
    <p>Taiwan’s younger generation—born after martial law was lifted in 1987—are facing these fears. Having never experienced the governed shorelines of their parents, these millennial Taiwanese are flouting their elders’ previous hangups and celebrating the surrounding water instead.</p>
  </section>
  <section class="cover-image">
    <img src="https://images.unsplash.com/photo-1603258738642-8d07fd2d628f?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTR8fGElMjBkaXZpbmclMjBtYW4lMjBpbiUyMHRoZSUyMG9jZWFufGVufDB8fDB8fHww" alt="a diving man amoung the corals in the ocean">
  </section>
</main>
</body>

</html>

```css
/* file: styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Raleway, sans-serif;
}

main {
width: 100%;
  max-width: 100vw;
  padding: 1rem;
}

h1 {
  text-align: center;
  box-sizing: border-box;
  padding: 5px;
  background: linear-gradient(90deg, #9933ff 30%, #000066 100%);
  color: #e6f2ff;
}

h2 {
  margin: 2px 2px 10px;
}

p {
  font-size: 18px;
  letter-spacing: 1.6px;
  margin-bottom: 20px;
}

.magazine-cover {
  max-width: 1200px;
  width: 100%;
  /* центрируем по горизонтали */
  margin: 0 auto;
  /* фон у контейнера, если нужно */
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr;
    grid-template-areas:
    "title title title"
    "feature-article feature-article cover-image"
    "small-article1 small-article2 cover-image";
  gap: 10px;
}

.title {
  grid-area: title;
}

.feature-article {
  grid-area: feature-article;
  padding: 7px 15px;
  border: 1px solid #ccddff;
}

.small-article1 {
  grid-area: small-article1;
  padding: 7px 15px;
  background-color: #ccddff;
}

.small-article2 {
  grid-area: small-article2;
  padding: 7px 15px;
  background-color: #ccddff;
}

.cover-image {
  grid-area: cover-image;
  background-color:  #ccf5ff;
  padding: 1rem;
  /* чтобы занять всю ячейку грида */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  width: 100%;
  height: auto;
  display: block; 
}

@media only screen and (max-width: 756px) {
  .magazine-cover {
    display: grid;
    /* 1 колонка вместо 3 */
    grid-template-columns: 1fr;
    /* по 5 строк: заголовок, feature, small1, small2, cover */
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "title"
      "feature-article"
      "cover-image"
      "small-article1"
      "small-article2";
    gap: 0; 
    padding: 0
  }



### Your browser information:

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36</code>

### Challenge Information:
Design a Magazine Layout - Design a Magazine Layout
https://www.freecodecamp.org/learn/full-stack-developer/lab-magazine-layout/design-a-magazine-layout
2

I’ve found the root of the issue. I have @media in my code wich might be ruin the conditions for autotest. I deleted @media and it worked.

2 Likes
3

Don’t add anything extra that isn’t asked for in the instructions