Skip to content
Submitted about 3 years ago

3 column preview card component quasi responsive

GabFerreira•240
@Gab-Ferreira
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 used someone's advices to do this challenge better than the previous time. I think now it's better but I have some questions :

  • How to put a div at the bottom of another div ? I talk about the buttons Learn More in this challenge, because I wanted to do a progressive responsive design but the buttons go out of the flex. Here I did a simple responsive so we can't see.
  • When I was doing the media queries, there was a space at the top of the section but not at the bottom, so it wasn't centred in the page. If you have answer to those questions or other advices, please tell me :).

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted about 3 years ago

    Hey, great work on this one. This solution is really nice to look at^^. Layout looks great, it is responsive and mobile state looks great.

    For your questions:

    1. To be honest, I am confused about the question:>. If you see this one, explaining it a bit would be great.
    2. So I tried seeing the breakpoint and it looks good on my end. Are you referring to mobile state where the main has only small height. If that's it, it is because you are using height: 100% on the main which is relative to the body's height: 100% which you shouldn't do. Also on the section it is using height: 28rem.

    Aside from those, here are some suggestions:

    • Avoid using height: 100% on the body or html as it will be relative to the screen of the user. This will limit the height. Use min-height: 100vh instead so that the layout's height will expand if needed.
    • Also, on your markup, remove those meta tags and link inside the body tag. Those should be placed inside the head.
    • On the main tag, to make the layout centered, use min-height: 100vh and replace the height: 100% by it.
    • It would be great to make the footer outside of the main so that it will be on its own row:
    <main />
<footer />
    • When you are using aria-hidden="true" on an image, make sure that you are using alt="" since you are hiding the image.
    • Also, When using img tag, you don't need to add words that relates to "graphic" such as "picture" and others, since img is already an image so no need to describe it as one.

    Those only, again, great job for this one.

    Marked as helpful
    0
    GabFerreira•240
    @Gab-FerreiraPosted about 3 years ago

    Hello @pikamart, thanks for advices. Today I learnt that if we don't a height on a div in flex, the div is responsive, so it resolve my questions.

    For the meta tags, I don't know why those tags were in the body because on my code they are only in the head tag x).

    Again thank you !

    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