Skip to content
Submitted over 3 years ago

Preview Card Component - HTML and CSS

Mirko•40
@mirk-00
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, this is my first try at html and css so i have some doubts i couldn't figure out by myself (lines refer to css file):

  1. line 42: I specified margins in order to center my card but i think it shouldn't be needed. I tried different align and justify properties but none of them centered the .card div in the viewport

  2. line 112, the most troublesome part: I wanted the image to take 48% of the whole card. I thought to specify width=48% since .bg-image is direct child of .card. But this only let the image take less than 25% (width values). Also setting width to 100% makes the image take less then half of the .card container. I can't understand how the width percentages work. I also used viewport height and width (vh and vw) because i thought that 100vw should have let the image cover the whole viewport but instead only took about half of the card container, so there's obviously something I'm missing. I'd really like an explaination for this behaviour

  3. line 118: i'm not sure this is the smartest way to set the padding. Suggestions? Thanks in advance

Community feedback

  • Gaurav Shekhawat•35
    @Gaurav-ShekhawatPosted over 3 years ago

    For your point 1, enclose the entire card class inside another div, let say "container", then set the display properties of the "container" div as "flex", then set the justify-content and align-items properties to center

    Marked as helpful
    0
  • Marko•65
    @ElioskasPosted over 3 years ago

    Great job with this one! One thing, though, consider adding a margin top in the media query because part of the picture is cut of from the screen.

    0
  • Fury•945
    @ashiqfuryPosted over 3 years ago

    You made a excellent work..

    • use flex properties in body to center the .card div element and also you need to specify the height in body.
    • use flex-basis and object-fit: cover properties to solve that problem. when you use flex-basis property in .bg-image, you don't need to specify width

    Thanks..

    0
    Gaurav Shekhawat•35
    @Gaurav-ShekhawatPosted over 3 years ago

    @ashiqfury Woah, i didn't knew about that second point. Thanks for your feedback

    0
    Mirko•40
    @mirk-00Posted over 3 years ago

    @ashiqfury Thanks but i tried and didn't really work. flex-basis:50% has the same effect of width:50% with object-fit:cover. I can't really tell where is the problem here but i think it's something related to the other element inside .card, that is .text-items

    EDIT I solved the issue: i needed to set a width value for the second element too (i.e text-items) i thought that flex could figure it out automatically (since bg-image is 48% the other one must be 52% of the card) but apparently you have to be explicit about that

    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