Skip to content
Submitted about 5 years ago

Base Apparel coming soon page with Grid, Flexbox, Javascript

gomezlucas•1,115
@gomezlucas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

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
    @mattstuddertPosted about 5 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!

    0
    gomezlucas•1,115
    @gomezlucasPosted about 5 years ago

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

    0
    Matt Studdert•13,611
    @mattstuddertPosted about 5 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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