Skip to content
Submitted over 1 year ago

Responsive HTML and CSS stats preview card component

Lucian Ioan Chirilă•50
@LucianIoan31
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

Finally find out why Frontend is giving me the desktop width to be 1444px and how to make it work. hahaha

I learnt how to add an overlay to an image. Asked Chat GPT for that. (is there any other solution for this?)

Is using Chat GPT when you don't remember things a bad habit? Please note that I use it not for an absolute solution but to induce me a way for the solution I want.

I feel like I am more confident in finding why my elements are not centering when I want them to be centered.

I would like to know in which order should I write CSS code.

I should learn how to align little items. update: find a way to properly align those stats elements.

I am struggling with mobile version responsiveness and aligning the items.

My window browser didn't let me to go bellow 515px screen width. This is why my mobile version goes one when it reaches it. Is that ok?

Didn't know how to align text on mobile version as it in the provided design. Any help here please?

I feel like mobile version code looks bad and ugly.

Update: I thank [Hassiai] (https://www.frontendmentor.io/profile/Hassiai) and [Corina] (https://www.frontendmentor.io/profile/Cor-Ina) for the feedback they gave me.

They really helped me make some improvements and I really learnt something new about responsiveness.

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    There is no need to give the body a max-width value.

    To center the main on the page using flexbox, replace the height in the body with min-height: 100vh.

    There is no need to give main a value, the padding value of .container can replace it, this will prevent the content from overflowing.

    For the color of the image add opacity of 0.8 to .overlay-bg.

    For a responsive image that will change the images at different screen sizes use the picture tag. For more click here

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    0
  • Lucian Ioan Chirilă•50
    @LucianIoan31Posted over 1 year ago

    I have a big screen. This is why the dimensions of the card are so different.......

    0
    Cor-Ina•250
    @CorinaMurgPosted over 1 year ago

    @LucianIoan31 Hi Lucian,

    The mobile version doesn't look that bad. Make sure that the width of main is responsive, so set it as a percentage , and not in pixels. In general, avoid using measurements in pixels. %, em, or rem set the foundation for a responsive design.

    For mobile, you should also add a top margin so the image is not right at the start.

    Hope this helps a bit! Corina

    Marked as helpful
    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