Skip to content
Submitted almost 2 years ago

Base Apparel Coming Soon Page Using HTML + CSS Grid + CSS Flexbox + JS

Jennifer Chavarria•110
@jenn-chav13
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

This one was difficult!

I first started building the mobile view which was pretty simple. But once I started building the desktop version, I realized how HARD it was to change from one layout to another.

I ended up using Grid (which is completely new to me) to accomplish this one, but I can definitely say it was very very challenging.

Another thing I tried was using the img srcset attribute for switching the images when moving from one breakpoint to another, but I wasn't able to understand it or accomplish what I wanted. So I decided to go for a simple .hidden CSS class, which I know is not ideal since I'm basically loading both images and then hiding one.

Any tips on how to use img srcset here would be very welcome :) Thanks a lot!

Community feedback

  • Tryt4n•960
    @Tryt4nPosted almost 2 years ago

    img src="small.jpg" srcset="big.jpg" sizes="(min-width: 650px) 50vw, 100vw" alt="Example"

    You should use sizes attribute. In this example if min-width:650px would be loaded big.jpg with width of 50vw, if smaller than 650px small.jpg with width of 100vw.

    Also you can use JS to dynamically change src of image: window.addEventListener("change", () => { if (window.innerWidth >= 650) { element.setAttribute("src", "your_path_to_img") } else { element.setAttribute("src", "your_path_to_img-small") } })

    Or you can use CSS for example you can create div and then give it height and width and set background: url("path-to-img"). And of course place it in media query. But then you should also give that div a role="image" and aria-label="image_description".

    Also in form you have input element but you haven't got label. Even when label isn't visible it still should have be.

    label for="email" aria-label="Enter your email"

    input type="email" name="email" id="email" title="email_field" placeholder="Email Address"

    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