Design comparison
Solution retrospective
Hello, Frontend Mentor Community! π
I'm thrilled to announce that I've successfully completed another challenge! ππ»
Please check out my solution and provide your valuable feedback.
Thank you for your continued support and encouragement.
Happy coding fellas!!!
Community feedback
- @Orekihotarou-kPosted about 1 year ago
Hi there @falloumacbook. Congrats on completing another challenge! π₯³. I took a look at your live solution and there's a few things I think might be of help.
- I noticed that you use fixed px values for your widths and heights on the images. I think that using percentage values is easier and also facilitates making them responsive. Here's an example;
- Create a div for the image in the illustration div and then give the new div (let's call it illustration-image) a width of maybe 80% (this width will always be 80% of the parent container illustration on any screen size).
.illustration-image { width: 80% }
- In your style-sheet, select the image inside the illustration-image div and set the width of the image to 100% (this will make the image 100% of it's parent container);
.illustration-image > img { width: 100% }
- With this done, you can then change the width of the parent (illustration-image). When you change this value, the size of the image will also be changed as the image is 100% of its parent.
.illustration-image { width : /* add desired value as a percentage */ }
- Using your cards section as an example, I noticed that as the screen gets smaller, the card content just starts to overflow. This is because of the fixed width and height values assigned to them. To fix this, instead of setting fixed values in px, padding can be used to adjust these to your desired sizes. For instance;
.card { color: white; width: 350px; height: 170px; background: hsl(219, 30%, 18%); margin-bottom: 40px; }
these are the styles you applied. Using padding, it'll look something like this;.card { color: white; padding: 2rem ; *this sets the padding for top, bottom, left, and right to 2rem* background: hsl(219, 30%, 18%); margin-bottom: 40px; }
- Another thing I think may be useful for layouts like this is using grid. Here's a link to help you with that Get started with css grid
These are just a few things that I think might be helpful as you code along. Happy coding πβ¨
Marked as helpful0@falloumacbookPosted about 1 year agoHi @Orekihotarou-k, your comment is a really helpful. Thank you so much for taking your time to help me out. I will work on it. π
1
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