Ronnie James Dio
I’ve revamped the page based on your advice.
I hope this time I managed to improve it.
Thank you.
Your revamped page looks good @icxc. Some things to revisit;
- The test script, with all tests passing, should be included when you submit your projects.
- Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
- Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
- Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
- “catch the rainbow” is not accessible
- Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.- Reference MDN Docs
1 Like
My intention was to improve this project, which in the first version was quite poorly worked.
So I thought of restarting the project from scratch, with a slightly modified title.
In the comments you sent me, you state that: Your page passes 9/10 user stories and Catch the rainbow is not accessible.
Strange. For me, it’s 10/10 and I can open the link in another window, both on the desktop and on the smartphone.
What to do? Should the first project be modified in the same way as the second project was designed?
In this case, will the version I saved the first time be automatically updated?
Thanks,
When I run the test I see 9/10 user stories passing. The failing test says
The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'
AssertionError: Use the "display" style property with a value of "block" for responsive images.: expected 'inline' to equal 'block'
And looking at your code I see
#image {
max-width: 80%;
height: auto;
}
So the error is valid. When I use the error message to add the display property and run the tests it fails again but with a different message. When I correct that, the tests pass successfully.
Accessibility is not about the link opening in another window. Please read the provided links.
No, that’s not necessary. I didn’t say anything about that. You could have made an entirely different tribute page. I’m not sure what you’re asking.
If you modified the same pen then there is no reason to resubmit your project. If you created a new pen, then you’ll need to submit it as the completed project.
EDIT: I just recalled you said previously that you did the project locally and then copied it to codepen. Since I’m not seeing all the tests passing in codepen make sure that what you’ve copied to it is the same code that you’re running locally.
Ronnie James Dio
I have used all advice, all examples. I still receive observation with resize.
I don’t give up very easily, but I wonder if there isn’t an internal problem in Codepen.
I have seen in other similar projects that when you use body and main, you have problems with resize.
There’s nothing wrong with codepen. I tried to explain this earlier when I said
Once again, the first line says The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
And then the next two lines tell you what the test is looking for.
As I pointed out, you are not styling the #image. You are trying to style the parent #img-div. That’s why the test fails.
1 Like
You look a little irritated when I ask and that inhibits me.
I am on this forum to learn something and I am waiting to be taught patiently and without airs of superiority.
I am a beginner, English is not my native language, I do not have a very high level of intelligence, I understand hard, …
What to do? Should I leave the forum?
I’m not irritated, apologies if it seems that way. There was no tone intended in my reply. I was simply trying to reiterate where the issue is that you are seeing.
If I’m not explaining it well enough, please tell me what you do not understand.
And no, there is no reason to leave the forum.
Hi again!
You have a spelling error here.
imgage
Once you fix that spelling error then a new error message will pop up.
Open up the test suite and read the new messages until the test passes.
1 Like
From the above, you have a spelling error.
But previously you had
#image {
max-width: 80%;
height: auto;
}
So you just need to add the new property: value; pair to what you had.
I really did it this morning (My Time zone:CEST (GMT +02:00)) but doesn’t work.
I receive this message:
and I can’t solve it at all.
So the failing message says
The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'
You have
#imgage {
height: auto;
max-width: 80%;
}
We know there’s a spelling error so it should be
#image {
height: auto;
max-width: 80%;
}
When you correct the spelling error so it’s like the above and you run the test you’ll see 9/10 tests pass. This time the error message is different.
I mentioned in my first post that you need to add the display property here with the value that’s mentioned in the error message.
You have display:block; on the #img-div selector. That’s the parent element, that’s why the test fails.
It says it’s looking for the <img> element. Which you’ve given an id of "image". That is the selector you need to style.
2 Likes
Finally, it works. Thanks!
Unfortunately, I wasted too much time on this project.
By the way, congratulations on your site. I like it.
Awesome!
I am glad you were able to pass all of the tests. 
I would suggest taking a small break and revisiting it with fresh eyes tomorrow so you can work on those responsive issues we were talking about earlier.
Change the editor view like it is show here.
and narrow the preview window so you can see what your project looks like for smaller devices.
Then you can start making changes to the css so all of your content fits in the width of the device.
I thought I got rid of this " boring " project.
Of course, I will do what I have to do, Jessica
1 Like
Good job!
It wasn’t a waste if you learned something. Hopefully you’ve gained some insight into how to read and interpret the failing messages.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.