Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

@traez's Stats preview card component using HTML and CSS

Trae Zeeofor•490
@traez
A solution to the Stats preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


This is my 5th Solution here.

This was a tough one, the transition from mobile to desktop view, and maintaining aspect ratio was a tough nut to crack.

I Should probably insert a second media query between mobile and full screen view, but I'm tired much.

I would be grateful if someone was kind enough to go through my code and rewrite it to enable smooth transition, so I can learn.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Elaine•11,360
    @elaineleung
    Posted about 3 years ago

    Hi Trae, this is a really good attempt, and I think you did a good job on the whole. The only thing I'll point out here is for the image, you might need an object-fit: cover if not the entire image is shown in the challenge (meaning it's cropped).

    I can see in your code that you must have tried many different ways to get it to work, and so there's a lot of extra code in there that you may not need. The key to writing out these components that change from rows to columns is, you need to see which element you actually need to specify a width or height for (whether fixed or responsive) and remember that if you set something for a parent element, you may not need to set it for the child. Chances are, once you set the width for one element, the other ones will resize themselves accordingly and won't need you to give it a width/height. It's good to keep experimenting a few bits at a time, and once you find out which line actually worked, you can delete or comment out what doesn't.

    Overall, what I'd suggest is to build up some more knowledge about flexbox and using responsive properties such as max-width, and then keep experimenting. Here's a CodePen I wrote up for another challenge just as an example of the bare minimum code you need for this kind of a component (link at https://codepen.io/elaineleung/pen/GRxMLrz).

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas
    Posted about 3 years ago

    Hello Trae Zeeofor, congratulations for your solution!

    I have some tips to improve that:

    1.Add height:100vh; to the body to enable 100% of the viewport height then add 'display: flex;and align the body to center withalign-items: center;andalign-content: center;`.

    1. Use margin: auto auto; inside the main tag instead of margin: 5% 5%;. To align the content fully.

    2. To match the picture color as the design files you can use mix-blend-mode: multiply; opacity: 0.82; inside the img tag. But don't forgot to delete the previous effects you've applied otherwise the mix-blend-mode will not work.

    img { mix-blend-mode: multiply; opacity: 0.82; }

    The rest is all fine, well done Trae.

    I hope these tips help you to fix your solution, keep coding!

    Marked as helpful
  • Shard Codes•430
    @Shard-Codes
    Posted about 3 years ago

    Hello Trae Zeeofor.

    You did a fine job on the challenge.

    I can't rewrite your code right now. But I can refer you to my code so you can learn from it. Here's the link to my GitHub repo. And as for your accessibility issues, you must always include the Src attribute on your images, So that if your image has any error the alternate text will appear. And it also helps the visually impaired.

    I hope this helps, Regards.

    Marked as helpful

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub