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 card created with HTML and SASS

Marvin 130

@Marvin-Erazo

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


The dimension of the background image doesn't changes with the tablet dimension (768px) this doesn't cover the div

Community feedback

@besttlookk

Posted

hi It look great but unfortunately its not responsive.

Good luck

0

Marvin 130

@Marvin-Erazo

Posted

@besttlookk yes it is, i think the page doesn't works with your device resolution, i only made media queries for 3 different dimensions. Desktop (1024px) Tablet(768px) and Mobile L devices (425px), your device resolution is about 425 and 768px, sorry for this

0
T
Grace 29,310

@grace-snow

Posted

@Marvin-Erazo sorry to tell you that's not a good enough response. We build for all screen sizes. If it doesn't work, it's not finished.

This is broken for me on mobile landscape - possibly the same issue. I'll add screenshots to slack for you so you can see

It's actually a bit broken on both mobile orientations for me because of height 100vh instead of min-height and because of the fixed position attribution. Both of these need changing.

Other essential fixes needed

  • asides are not the correct elements to be using for the two card halves. Asides have semantic meaning - this is incorrect usage
  • you are heavily nesting your css selectors. When using scss your compiled css should be exactly the same as if you wrote the css directly - you would never write css like this because it increases specificity massively. You need to remove all the nesting, using single class selectors or as Low specificity as possible. This is a really important habit to break now before moving on to larger projects

I also recommend you change your html formatting to 2 space tab stops. It is really hard to read the code at the moment as every line is so spread out. Most developers use 2 spaces, or sometimes 4 but that is less common

I hope this helps. Please refractor before moving on to any other challenges

Marked as helpful

1
Marvin 130

@Marvin-Erazo

Posted

@grace-snow thanks for the feedback, i review my code and you're right. The CSS code is impossible to read, are many selectors and it doesn't look good. About the 4 spaces tabs, I use this because in many IDE's the tab is 4 spaces, but i will change this now.

0

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