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

3-column-preview-card-component-FLEX

MichalStuffβ€’ 40

@MichalStuff

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


Hello, I would like to aks for any suggestions about site/code

Community feedback

Yashasvi Singhβ€’ 890

@aUnicornDev

Posted

Use 100% on body instead of 100vw because the 100vw is causing an overflow on the viewport <1400px.

The reason is that a 100vw will not take into account the width of the vertical scrollbar, and thus 100vw+scrollbarWidth will create a horizonal scroll whereas 100% width will take the vertical scrollbar into consideration as well.

I like the layout for the image being on top on smaller screens but the image is covering the whole viewport.. and the contend is pushed out. Might wanna look into that.

Marked as helpful

0

MichalStuffβ€’ 40

@MichalStuff

Posted

@aUnicornDev I have done some changes using your advices. If you have more suggestions, please write Thanks :)

0
P
Patrickβ€’ 14,305

@palgramming

Posted

you need to adjust your mobile to desktop transition point til when the browser is wide enough to accept the desktop layout you are keeping the mobile layout too long currently

Marked as helpful

0

MichalStuffβ€’ 40

@MichalStuff

Posted

@palgramming I heve done some changes and i added couple media queries. And i also don't have PRO account so i made this site using design images. Thanks :)

1
P
Patrickβ€’ 14,305

@palgramming

Posted

@MichalStuff Great changes 100% improved it looks great. Nice Job 🌟🌟🌟🌟🌟

1
MichalStuffβ€’ 40

@MichalStuff

Posted

@palgramming Thank you, these words motivate me but i need to work on keeping the code clean :D

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