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?
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’.
Thank you so much for the feedback! Your advice worked perfectly, and the layout hasn’t broken, which is really a relief
And thank you for the encouragement, I’ll check how to make the page more responsive!
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
importto call your font you can do it in the CSS section. The only time you’d use HTML is if you were using
linkto call your font, then it would go into
- If you’re using
Thank you so much for the info! I haven’t known that. Fixed!