Design comparison
Solution retrospective
Getting the images for each screen size loaded correctly. Still getting a hang of SCSS. How should your code be organized? ....If you have articles that might help please let me know.
Community feedback
- @elaineleungPosted about 2 years ago
Hi Adeoye, I think @vanzasetia gave you some really good advice, so I'll just keep this short. You may find that after you adjust your breakpoint, your image may be pushed upward with some space in the image container. If that's the case, you'll have to add
object-fit: cover
andheight: 100%
to theimg
. As Vanza said, everything is really big, and I think you can try reducing the sizes in general. If you compare your solution with the original design at 1440px, your body's paragraph font size is almost double in size. Other than that, things look good, and your use of the responsivepicture
element was also done well, so keep it up! πMarked as helpful2@unkuseniPosted about 2 years ago@elaineleung Thank you for the advice, You just solved one of the issues I couldn't find an answer to. Thanks again, I'll make changes to the CSS
1 - @vanzasetiaPosted about 2 years ago
Hi, Adeoye! π
First, I would recommend having the non-minified stylesheet. It will allow everyone to see and give feedback to your CSS easily. π
About organizing Sass files, I like the 7-1 pattern: 7 folders, 1 file. So, you may want to give it a try.
For the image, I would recommend adjusting the breakpoint of the
media
condition.1440px
for the desktop image is too late. The same for the breakpoint of the media query.I suggest adding the media query whenever it is needed (not based on specific screen sizes). So, when there's enough space for the card to become two-column layout, add a media query there.
Lastly, I recommend having a
max-width
on the card element. Currently, on1280px
the card is filling the entire page, the image is so big, and the paragraph content is really spread out (not good readability).Hope this helps! π
Marked as helpful2 - @correlucasPosted about 2 years ago
πΎHello Adeoye, congratulations for your new solution!
π Youβve done really good work here putting everything together, Iβve some suggestions you can consider applying to your code:
You need to fix the
container size
that is a bit off, this challenge uses the standard container size that ismax-width: 1110px
. To make the image have a better fit inside of it, make the component image responsive withdisplay: block
andmax-width: 100%
(this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling useobject-fit: cover
.img { display: block; object-fit: cover; max-width: 100%; }
If you want to add the same effect of the design for the image overlaying it with
purple
there's a shortcut that is by usingmix-blend-mode
with the modemultiply
and with an opacity aroundopacity: 82%
. See the code below:img { mix-blend-mode: multiply; opacity: 82%;}
βοΈ I hope this helps you and happy coding!
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