Skip to content
Submitted over 1 year ago

3-col-preview-card

Tian•410
@TianYeCal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The only thing is about the responsive setting, if I set the main with 100vh height when I changed to mobile width, the website can't show all the whole picture

Community feedback

  • CODE STEAL•680
    @leandrorodrigues00Posted over 1 year ago

    Hello @TianYeCal !!

    The reason for this is that when you use heigth:100vh, you are imposing on the browser that the element will be the size of the available viewport.

    When you get to mobile screens, the layout breaks down, because you make everything inside the main to occupy only the space that is visible in the user's browser.

    To resolve this unwanted behavior, you can use the min-height:100vh tag to ensure that the element occupies the entire screen, but can move off the screen if necessary.

    Notice how the height of your site looks like on mobile devices with these 2 properties:

    height: 100vh ==== 540w x 929h

    min-height:100vh ==== 540w x 1385h

    I hope I was able to help! :)

    Happy coding !

    Marked as helpful
    0
    Tian•410
    @TianYeCalPosted over 1 year ago

    @leandrorodrigues00 thanks! just started to practice, feeling like long way to go, thanks for the help!

    1

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