
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
The things I'm most proud of
- shortening the style code using sass and mixins like
@function rem($pixels, $context: 16){
@return calc($pixels / $context)* 1rem;
};
- You can add more components to the page easily -It's a mobile first design
@mixin breakpoint($size) {
@media (min-width: map-get($breakpoint_up, $size)) {
@content;
}
}
- add rel="noopener noreferrer" to attribute to fix security problems
What specific areas of your project would you like help with?
please please please how do i fix the img in desktop view
html
in desktop view there's a small white bar below the img this is the style
img { max-inline-size: 100%; block-size: auto; height: 320; aspect-ratio: 340/240; object-fit: cover; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; @include breakpoint(medium){ border-top-left-radius: 0.75rem; border-top-right-radius: 0; border-bottom-left-radius: 0.75rem; height: max-content; aspect-ratio: 300/535; }
Community feedback
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