Skip to content
Submitted about 4 years ago

Flexbox

Karan Mishra•10
@karanmishra0904
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

How do I have 50% width for the image and also keep it responsive? Also, is there any way I could have been more efficient with my css?

Any other feedback would be appreciated. Thanks a lot.

Code

Please log in to post a comment

Log in

Community feedback

  • Suvankar Pradhan•670
    @suvankarpradhan

    Try this..... .main-box { position: relative; height: 100vh; padding: 10% } .main-box-inner { display: flex; flex-direction: row; } .left-box { background-color: hsl(244, 38%, 16%); display: flex; flex: 50%; flex-direction: column; justify-content: space-between; padding: 50px 60px; border-radius: 10px 0 0 10px; } .right-box { display: flex; background-color: hsl(277, 64%, 61%); flex: 50%; border-radius: 0 10px 10px 0; }

  • Michael Kret•470
    @atekron

    I would use a separate css file for my styles, and I'd rather start my design from mobile version, just because it easier to scale up

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