H2 span tag is not rendering inside page

Tell us what’s happening:
Describe your issue in detail here.
I am trying to complete the “product landing page” however the h2 span tag is not rendering in the page.

Your code so far

This is my current code pen

HTML CODE

 <section id="hero">
    <h2>Handcrafted, home-made masterpieces</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input
        name="email"
        id="email"
        type="email"
        placeholder="Enter your email address"
        required
      />
      <input id="submit" type="submit" value="Get Started" class="btn" />
    </form>
  </section>

CSS CODE

#hero {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}

#hero > h2 {
  margin-bottom: 20px;
  word-wrap: break-word;
  color: black;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

Hey there! Welcome to the forums :wave:

Maybe I’m missing something but I don’t see a <span> tag in your code. Which element is it that’s giving you trouble?

1 Like

Hi @NathanWongkar ,

Your h2 element is just not showing.
It is hidden behind the #header section with the position: fixed.

header {
    position: fixed;
    top: 0;
    min-height: 75px;
    padding: 0px 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #FF8877;
    font-size: 30px;
}

When you have an element that is fixed (or absolute), there is no element after it. The fixed element is taken out of the document flow.

I find that increasing the margin-top of your #hero section will make your h2 element show :

#hero {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    margin-top: 170px; // increase this to be more than 50px 
}
2 Likes

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