Skip to content
Submitted over 3 years ago

HTML CSS Flexbox Sass

sass/scss
Saleh•390
@SalehAbuhussein
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

To be Honest with You I find it hard to adjust the Card to image size.😭 My Questions are:

  1. **Is there a way to do the image resizing part more easily or more simple that what I did **.
  2. Rate the Accessibility and the Structure of the (Sass + HTML Markup)

The Resizing Part of the Image took a lot of time so if there is some articles related to that I'd appreciate your opinion and resources. 🥰

Code

Please log in to post a comment

Log in

Community feedback

  • Gareth•410
    @Gareth-Moore

    Hey Saleh,

    A valiant effort!

    I liked your HTML markup. It was clear and concise.

    Your CSS got me a little confused :( I couldn't really put it together very well in my brain haha. I see you added lots of @media queries. Might I advise you that putting them in one place is quite a bit easier as you can edit them easily in one place rather that running all over CSS land!

    If you'd like, take a look at what I did in this challenge regarding CSS organisation. Perhaps you can find something useful as I like to be highly organised but also very efficient. I normally use categories like typography (for things like p, h1, span and a), layout (for things like div, main, body, ul and section) and components (for things like buttons, img, svg and input). I usually start again but this time with @media queries. See the link and it will make more sense haha https://github.com/Gareth-Moore/Frontend-Mentor-projects/blob/master/Newbie/stats-preview-card-component-main/css/styles.css

    Lastly, resizing images on the fly can be done in many ways but if you want the image aspect ration to stay the same you are going to have to keep the container proportions the same. Conversely, if you want the dimensions of the container to stay change in proportion then you are going to have to stretch or distort the image in some way. You need to decide which you'd prefer but you can't have both.

    That is why when you change the card size the image got squeezed down. You need to keep the proportions of the card right so the image does have to change it's aspect ration. Setting % values and using rem's can help you a lot in this case.

    Well done! Gareth

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the gap of the card statistics is a bit too big and secondly the font size needs to be a bit bigger. Lastly the card title needs to have word wrap as seen in the design

    I hope this helps

    Cheers Happy coding 👍

  • Saleh•390
    @SalehAbuhussein

    I forgot one more Question: When ever I change the Card size the Image squeeze down and the Card got messed Is there a way to fix that ?

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