Product Landing Page - Cant resize image

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I cant resize the #header-img :pensive:

thanks

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">    
    <title>Original Trumboms</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <header id="header">
      <nav id="nav-bar">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trumbon">
        

        <a id="nav-link1" class="nav-link" href="#section1">section1</a>
        <a id="nav-link2" class="nav-link" href="#section2" >section2</a>
        <a id="nav-link3" class="nav-link" href="#section3" >section3</a>
      </nav>
    </header>


    <main>
      <div class="flexbox">
      <section id="section1"></section>
      <section id="section2"></section> 
      <section id="section3"></section>

      <section>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Give us your email"> </input>
        <input id="submit" type="submit" value="Submit">
      </form>
      </section>


       <video id="video" width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          
          </video>
      </div>
    </main>
  </body>
</html>

/* file: styles.css */
#nav-bar {
  position: fixed;
  top: 0px;
  display:inline-block;

}​

#header-img{
  height:500px;
}


.flexbox{
  position: fixed;
  top:200px;
  display:flex;
  flex-direction: column; 
}

section{
  display:block;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Try to change id of image to something diffreant other than ‘header’…also remeber about width.
Im not sure you need it inside nav-bar…

3

Wow, this one was a tough one.

I’m not exactly sure what it is, but you may have some invalid hidden character or something immediately after your #nav-bar CSS section. It would seem there is something wrong at the closing } or immediately after it. Anything immediately following your nav-bar section doesn’t work properly. If you move the whole block of nav-bar to the end, it shows a red error immediately after it but I wasn’t able to identify or remove any invisible characters or anything.

The way I fixed it… highlighted and deleted everything between the end of display:inline-block; and start of #header-img{ and retype it. Its just some empty lines and the closing }, so just delete those lines and the }, retype the } and then it seems to work.

#nav-bar {
  position: fixed;
  top: 0px;
  display:inline-block;
                                 <start selection
}​                                    Delete all between these markers
                                  <end  selection 
#header-img{
  height:500px;
}
4

hey ! thanks!!! that did it, but how did you know it was that??

5

Now thats a fun story… dump luck… or trial and error through years of troubleshooting experience.

I mean, first I tried modifying settings, and nothing I typed changed anything. Then I tried simpler stuff, like setting background color and things, and nothing worked. That’s when I felt something was wrong.

So tried styling other items with that section, didn’t work. I thought maybe some invisible item was using the name header-img but couldn’t find it. I then created a new header-img section elsewhere, and that did work, so now I knew the problem was related to that selector section… so I deleted and created a new one there, and it didn’t work, so the problem wasn’t the name, but the location of where I was typing it. Tried moving things around, and that’s when I saw a red error at the bottom of nav-link when I put it at the bottom of the CSS file.

So I put it back in its original position, and started deleting lines of it one at a time, didn’t work. Deleted the whole thing, the rest did work. Put it back, and deleted the bracket at the end… then other code worked… so just determined that’s where a bad invisible character or other corruption must lay.

Deleted that area and replaced it, problem solved… still not sure what was there… maybe a piggy-backed character from a copy/paste or something. Thought about copy and pasting into a software that allowed me to view invisible characters, or write a function to go through characters and get the ASCII or something… but it was late, and I was tired… guess I’ll never know.

6

thanks for sharing that process, great help to a newbie!! taught me a lot!