Skip to content
Submitted over 3 years ago

Mobile first solution with flex-css

Dardian•60
@TheTryfechta
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! This is my first submission, I know it's not perfect, but that's what I managed to do as of now. Hopefully with time I will get better.

I have two questions.

  1. How do I add color overlay to the image so it will look purple?
  2. If you check my github repo you will notice that in "styles.css" I made a div with the class .card, made it use flexbox and set the property of its two children to flex: 50%, but when I change the width of the browser window (to simulate a smaller screen), the image does not shrink, making the content of the left column overflow. Why does that happen and how can I fix it?

Community feedback

  • Carl Wicker•1,055
    @carlwickerPosted over 3 years ago

    I did this project today... I layered another solid color div over the image with opacity to make the image color but there maybe a better way to achieve the effect.

    Also, in the brief it states two static sizes for widths:

    • Mobile: 375px
    • Desktop: 1440px

    I'd consider changing your % based widths.

    I also added guide rule lines to design docs in photoshop to help get the correct size for elements.

    Keep up the good work.

    0
  • Dardian•60
    @TheTryfechtaPosted over 3 years ago

    Also, I used "generate new screenshot" but the screenshot didn't seem to update so please preview the website itself to see how it actually looks! :D

    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