Skip to content
Submitted over 4 years ago

UI for Desktop version done.

Shubham Verma•225
@ShubhamVerma1811
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

Hey! Under the .info-container when I set the height to 100vh, There was a gap left there. I think it's because of display: flex I tried margin, padding : 0 but it didn't work. I have changed the height to 1000px right now

Community feedback

  • Adarsh Pratap•5,515
    @adarshcodesPosted over 4 years ago

    Hi @ShubhamVerma1811, Congratulations on completing your first solution and Welcome to this amazing community. I find out Why this thing is not working, I was just like giving up then, suddenly got the problem, Here is your solution- Remove height: 1000px; and make it height: 100%; to the .info-container. and also add this part

    .heroImage { height: 100vh; }

    .heroImage img { height: 100%; } to your code and it's working now :D

    Nice work on this challenge, keep it up brother And give it a try to solve the Accessibility and HTML issues

    2
    Shubham Verma•225
    @ShubhamVerma1811Posted over 4 years ago

    @adarshcodes Thanks for the suggestion. I tried doing what you said but there is still a gap at the bottom. It is happening because the .wrapper is set to display:flex. Also, when the window is resized horizontally the gap increases.

    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