Skip to content
Submitted 9 months ago

3 Column Preview Card Component - Vanilla HTML/CSS

Craig•190
@cchivers
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

I need some help with the responsiveness of this site. Desktop was not that bad, but dealing with the mobile version I am cutting off the first element a little and if I resize the page then I can cut off more. How can I bring the element down? I don't know if this is cause of my code and I am doing this or if I should be setting something. Any help will be appreciative.

Community feedback

  • Yusuf K. Muhammad•570
    @kyusufmPosted 9 months ago

    Hi Craig,

    Nice Solution. The font's not loading though. You can add padding for the button to make it more appealing. and also add more to the margin-top.

    For the semantic html: You need to add <h1> first. don't start with h2, it's not good practice and will make seo score lower. if the h1 size too big, you can set the font-size in your css.

    That's all for now. keep going man!

    0
  • at33v•40
    @at33vPosted 9 months ago

    Hello, try doing the following:

    1. Replace height: 100vh with min-height: 100vh on the body element.
    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