Skip to content
Submitted over 3 years ago

Four card mobile first with HTML & CSS

Antonius Steven•100
@ASteven21
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey everyone! I seem to have a problem with getting the page to have a 100% height on the browser window although I applied 100vh already. Can someone tell me how to fix it? Thanks in advance!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello, Antonius Steven! 👋

    Nice job on this challenge! 👏 The height of the page seems fine to me (although if I ever have any issues like that is usually add min-height: 100vh to the body). 😅

    The only small thing I suggest is to use a single heading tag for the heading of the page (since it is really just a single heading, not two separate headings). You can easily style the two parts of the heading differently by wrapping one of them in a <span> tag. 😉

    Keep coding (and happy coding, too)! 😁

    1
    Antonius Steven•100
    @ASteven21Posted over 3 years ago

    Hi @ApplePieGiraffe!

    Thanks for the feedback!

    Oh yeah, about the heading, I just realised that it was actually a single heading rather than two headings after reading your comment. 😅

    Regarding the height of the page, I actually put the min-height: 100vh in the body but I didn't see any effect. 😅

    Thanks again btw for the reply, I really appreciate it. Happy coding to you too! 😁

    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