Hi
You need to swap the second heading for a paragraph tag, and remove the word “image” from the img alt attribute.
This looks very broken for me on mobile because you’ve used explicit widths and heights and because of viewport units. To fix you need to
- change height 100vh on body to min-height so it can grow
- change the width of the card to max-width and use rem (or px if you’re not comfortable using rem yet). The image can be display block and max-width 100%, but the max width on the card will stop it growing too wide
- remove height on the card altogether, it is not needed and will only ever cause bugs. Let the height of the card be dictated automatically by the browser - it will be added up height of the cards contents, padding, and any vertical margins on that content. The height needs to be able to grow
Marked as helpful
@Ivuska
Posted
Hi @grace-snow, thank you a lot for your very helpful particular tips and explanation. I tried to fix all the stuff so it hopefully works properly also on mobile, too.