Skip to content
Submitted over 1 year ago

Stats Preview Card Component

Furkan Y.•80
@frkanyilmaz2
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

Hello, I divided the main component in half, tagging them right and left column. When I play with the screen size, right column keeps its ratio and shrinks down while the left column's elements adjust themselves. And it becomes ugly. How do I prevent that?

I mistaked the column with rows in style.css dont mind that :D

Community feedback

  • Chris•520
    @9CB5Posted over 1 year ago

    You just need to add a property of height: 100% on your image element and it will fill the parent div. You may also use background-image as an alternative.

    As for the left-side, you can add a gap: 1rem to the .left-row class so the elements don't clump together when the screen size is reduced.

    Marked as helpful
    0
    Furkan Y.•80
    @frkanyilmaz2Posted over 1 year ago

    @9CB5 it worked thanks :)

    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