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 using html & css

Manav 20

@R3XCran1um

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


Any feedback is appreciated, particularly about responsiveness. TY

Community feedback

Davide 1,725

@Da-vi-de

Posted

Hi, Nice result on this challenge, well done! You can run the report again and it should clear your issues, i saw you fixed them!

  • You don't need the first media query, just code the mobile version and then add breakpoints!

Keep coding :-)

Marked as helpful

0

Manav 20

@R3XCran1um

Posted

@Da-vi-de thx for the feedback. Can you explain what do you mean by adding breakpoints?

0
Davide 1,725

@Da-vi-de

Posted

@R3XCran1um I mean if you work with dev tool open in your browser and you turn responsive mode on, set the width at 350px you do everything for that width no need to put it in a media query, breakingpoints are the media queries!

0
anna 340

@annab6

Posted

Hi! I think you could add image through css, not as an image tag in HTML. That way you could switch between desktop and mobile images for different breakpoints.

0

Manav 20

@R3XCran1um

Posted

@Anna60991 I did that way originally, as you can see with the desktop version but for some reason in the mobile version using css to add image didn't work i.e. the image just disappeared.

0
anna 340

@annab6

Posted

@R3XCran1um try to set up height of the .img-box, and background image must appear

Marked as helpful

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