@GrzywN
Posted
Great job on the challenge @nnorthway!
You can achieve responsive images by using width: 100% and max-width: 350px for example. Or just with a one line and new CSS function width: min(350px, 100%). Sometimes you can use vw units instead of percentages or with calc() to take paddings/margins into account: width: min(calc(100vw - 2rem), 350px). There is also another way with new aspect-ratio: calc(width / height) property and width: 100%; height: auto;.
Also always make sure to wrap the main content into <main> tag to solve accessibility issues.
Hope this helps! Have a nice day and keep coding !
@nnorthway
Posted
@GrzywN the main tag! Forgot that. I think aspect-ratio would have been the answer here for sure. Thanks for the suggestions!
