# Learn CSS Grid by Building a Magazine - Step 6

**URL:** <https://forum.freecodecamp.org/t/learn-css-grid-by-building-a-magazine-step-6/689800>\
**Category:** Curriculum Help\
**Created:** [May 11, 2024, 11:51pm UTC](https://forum.freecodecamp.org/t/learn-css-grid-by-building-a-magazine-step-6/689800 "2024-05-11T23:51:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![self.taught](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@self.taught](https://forum.freecodecamp.org/u/self.taught)\
**Post date:** [May 11, 2024, 11:51pm UTC](https://forum.freecodecamp.org/t/learn-css-grid-by-building-a-magazine-step-6/689800/1 "2024-05-11T23:51:25Z")

</div>

### Tell us what’s happening:

Building a Magazine step 6 I am having trouble with the exact syntax for in-line style tags. I do believe I am close to correct. However, I cannot move on. Here is my code…

```img
            alt="freecodecamp logo"
            loading="lazy"
            class="hero-img"
          />

```

### Your code so far

```html
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>

<!-- User Editable Region -->

    <main>
      <section class="heading">
        <header class="hero">
          <img style="width:400px;"
            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
            alt="freecodecamp logo"
            loading="lazy"
            class="hero-img"
          />
          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
          <p class="hero-subtitle">
            Our efforts to restructure our curriculum with a more project-based
            focus
          </p>
        </header>
      </section>
    </main>

<!-- User Editable Region -->

  </body>
</html>

```

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

```

### Your browser information:

User Agent is: `Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36`

### Challenge Information:

Learn CSS Grid by Building a Magazine - Step 6

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-grid-by-building-a-magazine/step-6)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![Teller](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teller/32/412338_2.png) [@Teller](https://forum.freecodecamp.org/u/Teller)\
**Post date:** [May 12, 2024, 12:38am UTC](https://forum.freecodecamp.org/t/learn-css-grid-by-building-a-magazine-step-6/689800/2 "2024-05-12T00:38:27Z")

</div>

Hi @self.taught

> Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400` .

Your code is using the **style** attribute.  
Try using the **width** attribute instead.

> [@self.taught](#):
>
> ` <img style="width:400px;"`

Happy coding

---

<div class="post-metadata">

**Author:** ![waseemibnkamal](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/waseemibnkamal/32/325924_2.png) [@waseemibnkamal](https://forum.freecodecamp.org/u/waseemibnkamal)\
**Post date:** [May 14, 2024, 7:30am UTC](https://forum.freecodecamp.org/t/learn-css-grid-by-building-a-magazine-step-6/689800/3 "2024-05-14T07:30:43Z")

</div>

try to add width attribute to your image with value=“400” without px.

---

<div class="post-metadata">

**Author:** ![self.taught](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@self.taught](https://forum.freecodecamp.org/u/self.taught)\
**Post date:** [May 14, 2024, 10:20pm UTC](https://forum.freecodecamp.org/t/learn-css-grid-by-building-a-magazine-step-6/689800/4 "2024-05-14T22:20:16Z")

</div>

I got it. Yeah! Thank you.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 13, 2024, 10:21am UTC](https://forum.freecodecamp.org/t/learn-css-grid-by-building-a-magazine-step-6/689800/5 "2024-11-13T10:21:12Z")

</div>

Closed on November 13, 2024, 10:21am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.