Skip to content
Submitted about 2 years ago

Base Apparel landing page - Responsive layout with CSS Flexbox & Grid

Lucca Rodrigues•430
@ChromeUniverse
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've managed to implement all of the main features of this design, including email validation and responsiveness, but I'm having a hard time getting the background linear gradient to take up the full viewport height in the mobile design. Any suggestions? The source for the CSS styles and HTML layout is available in the GitHub repository linked to this solution. Thanks!

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @ChromeUniverse,

    Nice job on completing the challenge

    I had to change the colors to even see the linear gradient😅 I think the gradient is coming from the bottom of the screen so you need to set it to 0 degrees. To get it to take up the full height you need to remove the height: 100vh or set it to min-height: 100vh on the .left-main in your media query.

    You should also add min-width: 100%; to the .left-main on mobile because you a min-width: 500px on desktop which is causing a bit of horizontal scrolling on mobile.

    Hope this is helpful.

    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