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.
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
No worries.
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