Design comparison
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
- @hitmorecodePosted over 1 year ago
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 helpful1@YoungZVPosted over 1 year ago@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@YoungZVPosted over 1 year ago@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 GitHubJoin 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