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

Stats preview component - Flexbox , Grid , Media queries

@franciscoprado4

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 challenge was hard, especially on the responsive style. I lack of these skills so badly, but overall i think i did well.

Any feedback is welcomed.

Special thanks to: @melwynt and @Abdurehman420 that i think solve my problem with some tools that suggested me. Overall, thanks to all that have been helping my previous challenges.

Regards to y'all.

Community feedback

@jesuisbienbien

Posted

Hi Francisco,

Your solution looks great. However, on mobile view, the .title-text is too big that it pushes the image up. Hence, the image is partly cut-out. I've tested out different font sizes for the title-text and it seems 1.8rem would look closest to the design.

.title-text {
font-size: 1.8rem;
}

If you're using Chrome, in developer tools, there's a tool that you can use to check your website under different types of devices and viewports - toggle device toolbar (it looks like a phone and tablet). I believe it looks the same in Firefox too.

I hope this helps.

Jenny

0

@franciscoprado4

Posted

@jesuisbienbien Thank you for your feedback. I need to improve responsiveness a lot. Especially with images, that resize like crazy.

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