Tribute page: getting my img to responsively resize correctly?

Code Feedback
1

hello!! i’m very excited to learn html/css with you all~

i’m having trouble passing user story #8, even though it seems to react fine on my preview window? I would love to hear some feedback!

https://codepen.io/monettiyeti/pen/mdrQwrW

2

Hi there,it looks like this page is already responsive.

3

You did a nice job there,keep up the good work.
You can also follow this link to:https://validator.w3.org/
There you will be able to identify more mistakes in your tribute page.

4

Add the following properties to the image element and it will pass the test:

display: block;
margin: auto;
5

Welcome to the forums @monettiyeti.

Even though someone already gave you the answer you would have been able to find it on your own if you 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.)

It’s important to read more than just the first line. The next lines tell you what the test was looking for and how to correct the issue.

For this test, it sometimes fails again after doing the first correction but the text as to why it’s failing will be different so you’ll have to read the next failing message and incorporate that too.

Your page looks good. Some things you should revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. You have one element outside. Links to font(s) belong in the head element. Review this for an understanding of the HTML boilerplate tags.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • You should always provide the recommended fallback font in case the font you link to doesn’t load. Since you don’t mention it, users will see a serif font on your page rather than a sans-serif when the linked font doesn’t load.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “this game” is not accessible
6

hi roma! thank you so much, this was very helpful - i will reread where i got wrong and correct my mistakes accordingly!

7

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