@AGutierrezR
Posted
Hello there 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
General Structure and HTML:
-
Wrap the
.container
in a<main>
tag. All the content should be contained within landmarks. Every page minimally needs a<main>
element. -
Consider using
<picture>
tag that is commonly used for responsive images, here you can specify the difference image sources for different screen sizes and devices. For example:<picture> <source media="(min-width: 1399px)"srcset="/images/image-header-desktop.jpg"> <img src="/images/image-header-mobile.jpg" alt=""> </picture>
Check that
srcset
andsrc
are correct and change themedia
if you want the desktop image to kicks in on a previous or later screensize.
CSS and Styling:
- The mobile fonts are to big and makes the content to overflow the screen, fix the mobile font size.
- Add a
overflow: hidden
to the.container
to prevent the image to bleed out the card. - Instead of fixed widths, employ
max-width
andmin-width
for flexible and responsive design. - Let the content decide the height of the elements. Use padding and margins strategically for this purpose.
- The
body
should not have itsheight
limited. Instead of usingheight: 100vh
, usemin-height: 100vh
.
I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!
Happy coding!