Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

stat-preview-card

Brandon 60

@walker861

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was my first attempt with use of a media query. Any feedback on @media rule would be greatly appreciated. Any other constructive criticism is welcome as well. Thanks all!

Community feedback

@Sam-Guliker

Posted

Hi Walker,

Nice solution you've got there. The main doesn't really need a role since the html is already telling that it's a main.

For the design you are really close. Try to play a bit with paddings and you can do a "50/50" width solution.

Happy coding.

Marked as helpful

1

Brandon 60

@walker861

Posted

@Sam-Guliker thank for the feedback! I forgot about changing the role. That was originally a div element.

For the design issue, I normally have the screenshot opened and viewed as actual size. I will get it looking pretty accurate then upload and end up with some sizing issues. Is there a better way to do it to achieve a better layout?

1

@Sam-Guliker

Posted

@walker861

Did you check the styles-readme? I would do something like this for the layout:

<main><div class="text-container">{content}</div><div class="image-container"></div></main>

The text-container and image-container should have a 50% width. (ps you can check my solution)

Most of the time I just get the design, scale it out on my webbrowser like an overaly and just keep adjusting it until I see almost no difference.

I hope this was helpful :)

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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