Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Base Apparel Webpage

@Andrewthe13th

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What is the best way to display the hero image for this webpage?

Community feedback

@ronaldlamdev

Posted

I would set the overflow of the body to hidden so that it removes the little white space underneath the hero image when in desktop view. => body { overflow: hidden; }

Marked as helpful

0
P

@jNembhard

Posted

Great attempt Andrew! If you want to display the image properly, one strategy would be to wrap the form content and picture in it's own container, and then wrap both those containers in a wrapper and put a flex property on the "master container." Set the picture container to have a min-width of the full size of the picture and then make the picture responsive: (width: 100% height: auto) and it will fill that space. you also want to set a property called aspect-ratio directly on the picture with css code that mirrors the width and height of the picture. This will prevent cumulative layout shift (CLS) while the picture is loading and also keep your lighthouse performance scores nice and high. Hope this helps.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord