Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502

Submitted

Responsive Hero Using CSS Grid (Base apparel Coming Soon)

DarkDev56 330

@dotfivesix

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


Any feedback is valuable. The only part of code I am unsure about is .image-container. Found that padding-top technique from stackoverflow to make div responsive to its background image, alternative ways like <img> and ::before etc... don't give the result I want and this works somehow.

Community feedback

Elaine 11,400

@elaineleung

Posted

Hey DarkDev56, glad you found a workaround! In the first version of this challenge I believe I also used a background image, but eventually I switched to using an img. I think in most cases it's preferable to use an img for the hero image instead of a background-image div, and it's also easier to work with since an img is already content itself, whereas a background-image div is an empty div and needs to have width and height set on it. Using an img is for accessibility reasons too; screen readers can read out the description of the image, whereas there aren't alt tags on a background-image div. For a site like this that sells a product, it's an especially good idea to be a descriptive as possible.

Anyway, great job here still, and keep going! 😊

Marked as helpful

1

DarkDev56 330

@dotfivesix

Posted

@elaineleung Thanks for appreciating my project. I know that <img> works well and is the best but I wanted to change src of img without using javascript. srcset or src property isn't supported much in CSS by different browsers so I used this technique. Thanks for your feedback, I always try to use <img> whenever possible.

0
Elaine 11,400

@elaineleung

Posted

@DarkDev56 No worries! Actually according to caniuse.com, srcset has a 97% usage, which is higher than grip gap; the only places it's not really supported is just IE (which doesn't support most things) and Opera mini, as well as some really old browsers, but that's still a really high usage percentage compared to many properties. Also, I don't think you'd need Javascript at all for changing the image size unless someone really choose to do that, but CSS handles it all!

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