Submitted over 4 years ago

Base Apparel coming soon page with Grid, Flexbox, Javascript

gomezlucas• 1,115

@gomezlucas

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I thought this one was going to be quite easy, but I found it very challenging. The main issue was the image, I didnt want to set it as a background image but use the <img> tag instead, so I struggle to set the size for the responsive design. Even though I came up with a solution I am not 100% happy with it, so if anybody has a better idea or any advice to set the property to images in general just let me know. Thanks! :)

*/container .hero-imagen { height: 100vh; width: 100%; overflow: hidden; }

/*image .hero-imagen-xl { width: 100%; height: 100%; object-fit: cover; }

Community feedback

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Hey Lucas, great work again. This is definitely a project that looks easy enough at first glance but has some interesting challenges within.

For the responsive image, I'd recommend having a look into the picture element. Here's a good resource to get you started. Using the picture element you can conditionally render images all in the same element based on media queries with your HTML attributes. This means you don't need to duplicate the img tag and hide elements, you could instead re-order elements using Grid or Flexbox.

Hope that helps. Let me know if you have any questions!

gomezlucas• 1,115

@gomezlucas

Posted over 4 years ago

@mattstuddert Great advice Matt! I didnt know about that tag, thanks so much!

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

@gomezlucas you're welcome! It's a really useful element for responsive images in your HTML. I use it all the time! 👍

Please log in to post a comment

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