Response img not working—Tribute Page

Hi all,

About halfway through the Tribute Page challenge but for some reason my images are resizing when I change the viewport size.

In css I’ve set height to auto, width to 100%, and a whole lot of other renditions, but nada.

Please advise!

https://codepen.io/sqorio/pen/ExWPXpv

Looks like it’s a combination of the fixed grid columns and fixed width on .project-label.

  1. For grid-template-columns you can try using an auto grid using repeat and minmax repeat(auto-fit, minmax(250px, 1fr)).

  2. For the labels you likely just want them to be 100% width of their container (after fixing the grid). If you did want to limit their width, you should use max-width or a relative unit for the width value (like a % value).


BTW, you are not supposed to copy the example project. It’s just there as an example. Try to come up with your own design and more importantly your own code.

Thanks for the help! Making adjustments and it’s working out.

Definitely misread the assignment prompts and have been making page clones as opposed to my own. The code is my own, though. I’ve re-used snippets from googling online resources when stuck, and repurposed the images from the prompt is all. Again, simply misread.

Thanks.

1 Like

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