IMG in grid, not in block. Acceptable or not?

Code Feedback
1

Hello!
I’ve been working on my very first certification project (the tribute one), and I decided to make it with the grid layout: https://codepen.io/gornokolosnik/pen/KKpYBGZ
My code is not passing the responsive-image test. The script advises me: “Use the “display” style property with a value of “block” for responsive images”.
However, a quick check can show that the image is perfectly resizing, depending on the screen size, and never exceeds its original size.
So, may I leave it as it is? Or should I abandon my grid layout, and go through formal criteria to pass all the tests?
Thank you!

2

Hi @Gornokolosnik :wink:

You work is good and you can keep grid template. It’s clean and everything stand correctly except the ‘p’ in the Title that move depending on the size. Also check to make that the overall be more responsive for mobile/tablet.
And perhaps use ‘header’ to include ‘h1’ and ‘p’.

To pass test, just add a ‘display: block’ on your ‘img’.

3

Thank you so much for the feedback! Your advice worked perfectly, and the layout hasn’t broken, which is really a relief :slight_smile:
And thank you for the encouragement, I’ll check how to make the page more responsive!

4

Your page looks good @Gornokolosnik. Some things to revisit;

  • When using codepen it only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • All your styling should be external.
    • If you’re using import to call your font you can do it in the CSS section. The only time you’d use HTML is if you were using link to call your font, then it would go into head.
5

Thank you so much for the info! I haven’t known that. Fixed!