Image responsive and resize

I have been stuck up here for 4 hours and no solutions, please I need help.

HI @chris901 !

Welcome to the forum!

Please share your codepen link so we can see the issue and help you.

https://codepen.io/pen/chukwuemekasunday

hello
any solutions?

A few things.

No1.
Always keep the test suite in your html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

No.2
I am not sure if you are planning on using codepen to submit a live link or if you are going to deploy it somewhere like github pages.
But if you are planning on using codepen, then your image will need to be hosting somewhere because this wont’ work.

src="image.jpg"

For user story 5, read through the error message more carefully and read what you wrote instead.
You have a typo here

 <figcaption id="image-caption">

That is not the correct id name

For the other failing user story, you have an error concerning your media queries.
I would personally get rid of those media queries and that will help you pass this test.
Then you can add them back in.
Just make sure you are paying close attention to syntax errors because that is what is contributing to the failing tests.

thanks. i have been on this for too long

1 Like

No worries. :grinning:

The important thing with these projects is to pay close attention to small details.
Because often times that will trip you up for the tests.

i have changed the id =“img-caption”

Did you also fix the media query error?

It sounds like you are building this project out locally.
If so, your code editor should probably point out the error in your css concerning the missing }

i tried uploading the image from my google drive, but it not working.

Here is some good hosting options for free
https://www.guru99.com/free-photo-hosting.html

But also, for this class project, you could just use an image from wikipedia.

 <img id="image" src="https://upload.wikimedia.org/wikipedia/en/a/a4/Ojukwu.jpg" alt="ojukwu during his presidential campaign">

please, what should i do? its been over 5 hrs now

Please update your codepen because I still see this typo in the id

 <figcaption id="image-caption">

and this error with the missing }

@media (max-width: 460px) {
    h1 {
      font-size: 3.4rem;
      line-height: 1.2;
    }

Once you pass all of the tests, then you can continue to build everything out locally.
But for now, make changes to your codepen so I can see your progress in fixing those two issues.

You are still missing the } for the media query here

@media (max-width: 460px) {
    h1 {
      font-size: 3.4rem;
      line-height: 1.2;
    }

Does that make sense?
Maybe it would help to look at w3 schools media query definition so you can see your error better

Media queries need an opening a closing braces

@media (max-width: 460px) {
/*rules go here*/
}

Right now you are writing this

@media (max-width: 460px) {
/*rules go here*/

You see the difference?
You see where you are have a missing } at the end of your media query?

once you fix that then it will pass

i i think i have done that

you did it correctly here

  @media (max-width: 460px) {
    #main {
      margin: 0;
    }
  }

but not here

@media (max-width: 460px) {
    h1 {
      font-size: 3.4rem;
      line-height: 1.2;
    }
    
a {
    color: orange;
  }
  
  a:visited {
    color: orange;
  }
  
  #main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: auto;
    background: gray;
  }

where is the closing brace ?
that is why you are failing the test because of a syntax error

please check again, thanks

You are still missing a curly brace

This is the correct syntax

@media (max-width: 460px) {
  h1 {
    font-size: 3.4rem;
    line-height: 1.2;
  }
}

Then it will pass.