Design comparison
Solution retrospective
i had problems with sizing espicially on large screen and i also could not crop some of the images as it is in the design
What specific areas of your project would you like help with?how to crop the "schedule to social media" image in the right?
Community feedback
- @wonderlust101Posted 2 months ago
Before using a reset CSS, you have to know what each style does. I learned this the hard way. This is the issue for your image not cropping:
/* 5. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; }
The
max-width: 100%;
is preventing your image being larger than the container. I made this mistake as well a few weeks ago for another project. You can either unset it or change the value if you need a max-width.Example:
.overflow-image { max-width: unset; }
or
.overflow-image { max-width: 30rem; // or whatever value you want }
As for the image that need to crop past the bottom. Since you already have the overflow on the containers, we won't talk about that. Make the image position relative and add a
top: [value]
and a negativetop-margin: [same value]
to offset the difference. I'll take your code as an example:.posting-img { width: 75%; align-self: baseline; position: relative; top: 2rem; margin-top: -2rem; }
This is specific to your code but you can unset margin-top at either tablet or desktop breakpoint using the same method to unset
max-width
and just set the value of top to what you need since your grid set the row height to the tallest container.Marked as helpful0
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