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 component

YoungZV 260

@YoungZV

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


I have some issues with the image that's why my broken point is so high.

-Could you please let me know how i can control the img? When i made the browser smaller the img did not get smaller and a kind of padding appeared on the bottom.

-My reset file has max-width: 100% and i had to add width:100% to fill the image to the container.

Thank you in advance for your help.

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations well done. Your page is responsive so it works. Here is the thing about responsive pages, we overthink too much. Only developers play with screen sizes, making them small and large to see how the page works with different screen sizes. In reality normal people don't do this, they either open a site on a desktop, tablet or phone. They don't play with different screen sizes like we do.

We are the ones who like to se a page shrink and grow as we change the screen size, normal people don't care about this, not only that but the majority of people don't even know that this is possible.

So has long has you use media queries to deal with this, there is no problem.

Marked as helpful

1

YoungZV 260

@YoungZV

Posted

@hitmorecode

Thank you for your kind words and i agree, nobody does the shrink thing in real life :) Already updated my screenshots and codes, so the final edition can bee seen. Thank you.

0
YoungZV 260

@YoungZV

Posted

@hitmorecode

After doing some search i found a solution: Height:100% added to the followings ->

.article { padding: 0; height: 100%; }

.wrapper, .picture, img { height: 100%; }

or just simply

.article, .article* { height:100%

and added this to my img -> object-fit: cover;

my css file will be updated.

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