Skip to content
Submitted 10 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 10 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 10 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