Design a Newspaper Layout - Design a Newspaper Layout

HTML-CSS
1

Tell us what’s happening:

I have re-written my code a number of times searched for answers but cannot see what I am missing. The test fails at step 15 saying " third row of the grid template should contain a secondary-article spanning two columns and a cover-image", but I can see both the image and text exactly where they should be, please someone help before I go mad

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="stylesheet" href="styles.css">
    <title>Design a Newspaper Layout</title>
    
</head>
</head>

<body>
    <main class="newspaper-layout" >

      <header class="title">
        
        <h1>The Daily Times</h1>
        
        </header>

  <figure class="cover-image">
          <img src="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/8370/live/235fe800-90df-11f0-9294-e79bb3a0c05b.png.webp"></img>
          <figcaption>Met Police officers clash with protesters at Tommy Robinson rally</figcaption>
        </figure>      

      <article class="feature-article">
        <h2 class="feature-title">Dozens of officers injured as up to 150,000 join Tommy Robinson rally</h2>



        <p>Twenty-six officers have been injured while policing a protest organised by far-right activist Tommy Robinson, which saw up to 150,000 people march through central London.

Tensions flared at the Unite the Kingdom rally, with some protesters throwing bottles and other projectiles at police, the Metropolitan Police said – leaving four seriously hurt.

Tech billionaire Elon Musk spoke to protesters on Whitehall via videolink, while 5,000 people joined a nearby counter-protest organised by Stand Up To Racism.

Far-right activist Tommy Robinson’s latest event drew far fewer numbers on Saturday, as he led what he called an effort to “put the Christ back into Christmas” in London.

Only around 1,000 people gathered in Whitehall on Saturday for the carol concert, according to reported estimates.

It marks a sharp drop off in attendance compared to the estimated 110,000 to 150,000 people. people who participated in a London protest led by Robinson, whose real name is Stephen Yaxley-Lennon, in September.

</p> 
    </article>
<!
<figure  id="image" class="cover-image">
          <img src="https://ichef.bbci.co.uk/ace/standard/480/cpsprodpb/5c0f/live/671852d0-def0-11f0-8981-a3e982536304.png.webp"></img>
          <figcaption>A screenshot from a video found on Naveed Akram's phone shows his father conducting firearms training, police allege</figcaption>
        </figure> 

     <article class="secondary-article">

        <h2>Bondi gunmen threw explosives at start of attack and practised shooting weeks before, police allege</h2>
        <p>The gunmen who allegedly carried out a deadly attack on a Jewish festival at Bondi Beach last week threw four undetonated explosives at the start of the attack, including a "tennis ball bomb", according to newly released documents.
Australian Prime Minister Anthony Albanese has vowed to strengthen gun laws after a shooting targeting the country's Jewish community at a Hanukkah event on Sydney's Bondi Beach.

Fifteen people including a 10-year-old girl were killed in the attack, which Albanese described as an "act of antisemitism... [and] terrorism".

Police are alleging that the two gunmen were a father and son; Sajid Akram, 50, was shot dead by police, while his son Naveed, 24, is in hospital. His condition is unknown.

The prime minister said that the evidence points towards the attack being inspired by Islamic State (IS), after two flags were found in a car that belonged to the alleged perpetrators.</p>
      
      </article>

     <article class="small-article1">
        <h3>Why the railways often seem to be in such chaos over Christmas</h3>
        <p>


At a rail yard near Milton Keynes, a group of men in orange outfits are making final checks on huge slabs of railway track, preparing them so that they are ready to be installed over Christmas and New Year.</p>

      </article>


<article class="small-article2">
        <h3>Why Croatia's capital wants to hold Europe's best Christmas market</h3>
        <p>
  Christmas markets are not just tradition across Europe, they are big businesses that give cities a huge economic boost every December. For Zagreb, the capital of Croatia, it is an effective way of attracting tourists outside of the country's main summer season.</p>
  
      </article>

      <article class="small-article3">
        <h3>The 'winners and losers' in Universal UK's plan to rival Disneyland Paris</h3>
        <p><h4>Danny Fullbrook</h4>
<h5>Bedfordshire, Hertfordshire and Buckinghamshire</h5>

<h6>21 December 2025</h6>

Universal Studios' UK theme park was given the green light this week, a decision creating buzz for families up and down the country who might one day want to go.

After months of discussions, Secretary of State for Housing, Communities and Local Government Steve Reed gave planning permission for the park to be constructed in Kempston Hardwick, close to Bedford.</p>
      </article>

      </main>
</body>

</html>






/* file: styles.css */
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.cover-image img {
  max-width: 100%;
}
#image {
  max-width: 100%;
}

.newspaper-layout {
  font-family: Arial, sans-serif;
  display: grid;
  grid-template-rows: auto 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  padding:20px 20px;
  grid-template-areas: "title title title" "feature-article feature-article cover-image" "image secondary-article secondary-article""small-article1 small-article2 small-article3";
}

.title {
  grid-area: title;
  text-align: center;
  padding-bottom: 3rem;
}
h1{
  font-size: 5rem;
  background-color: lightgray;
}
.feature-article {
  grid-area: feature-article;
}
.cover-image {
  grid-area: cover-image;
  justify-content: center;
}  
.secondary-article {
  grid-area: secondary-article;
  padding-left: 5rem;
}
#image {
  grid-area: image;
}
.small-article1 {
  grid-area: small-article1;
}
.small-article2 {
  grid-area: small-article2;
}
.small-article3 {
  grid-area: small-article3;
}

Your browser information:

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

Challenge Information:

Design a Newspaper Layout - Design a Newspaper Layout

2

If I change the third line in grid-template-areas to do exactly what is written in test 15, in the same order, it works (and the second image is sent to the bottom, but there is only one image in the example).

3

the second image is not mentioned in the instructions

4

yeah, you should not have a second image

you instead have first an image that is not the cover-image and then two columns of the secondary-article. The secondary-article should be first two columns, not last two, and the last column should be for cover-image

5

Thank’s for the reply. I have tried that and get exactly the same fail at step 15 :face_with_thermometer:

6

If I take away the second image it fails at step 15 again saying “The third row of the grid template should contain a secondary-article spanning two columns and a cover-image.”

7

Yeah I know but if its not there it fails saying I should have the second image, i’m going to go mad lol … i’ve taken the second image out , moved it completely re-written my cod and it still fails at the same point step 15 “The third row of the grid template should contain a secondary-article spanning two columns and a cover-image.” … I need serious help lol

8

post your updated code

note that only one image is required in this, not two, and that image is the cover-image

you have added a second image that is not requested and makes the tests fail

9 
\*,

::before,

::after {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}

.cover-image img {

  max-width: 100%;

}

.newspaper-layout {

  font-family: Arial, sans-serif;

  display: grid;

  grid-template-rows: auto 1fr 1fr 1fr;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 20px;

  padding:20px 20px;

  grid-template-areas: "title title title" "feature-article feature-article cover-image" "secondary-article secondary-article" "small-article1 small-article2 small-article3";

}



.title {

  grid-area: title;

  text-align: center;

  padding-bottom: 3rem;

}

h1{

  font-size: 5rem;

  background-color: lightgray;

}

.feature-article {

  grid-area: feature-article;

}

.secondary-article {

  grid-area: secondary-article;

  padding: 20px 20px 20px 20px;

}



.small-article1 {

  grid-area: small-article1;

}

.small-article2 {

  grid-area: small-article2;

}

.small-article3 {

  grid-area: small-article3;

}

removed the second image, but am still getting the same error

10

Where is cover-image in this row? (And you really don’t need to remove anything in your HTML to pass the tests, except maybe that stray closing head tag :wink: )

11

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

12

Thank’s Ray, unfortunately problem still not fixed. I cannot see where i’m going wrong, beginning to get very disheartened. From what I can see it should work, but being very new to this, I don’t fully understand the code any pointers would be greatly appreciated

13

I’m going back to the code in your first message. Because with your latest CSS, it displays something worse on my end (maybe the HTML part is missing, but it doesn’t matter if we don’t use it).

So with the code from your first message, you only need to change the third string in grid-template-areas:
from this:

"image secondary-article secondary-article"

to this:

"secondary-article secondary-article cover-image"

So the complete property should look like this:

  grid-template-areas: 
   "title title title"
   "feature-article feature-article cover-image"
   "secondary-article secondary-article cover-image"
   "small-article1 small-article2 small-article3";

And all the tests pass (at least on my end).

Test 15:

  1. The third row of the grid template should contain a secondary-article spanning two columns and a cover-image.

You can easily reuse the code from your first message with the “copy” button at the top right of the code blocks. But maybe it’s better to save the work you’ve done in the meantime first.

1 Like
14

Ok that worked thanks, I have no idea why as I had already tried it that way round :rofl:

1 Like