Design comparison
SolutionDesign
Solution retrospective
What challenges did you encounter, and how did you overcome them?
I am a beginner. I found it challenging to add a white background to the right part of the design while the background color is different. Getting the accurate shade of green is also challenging.
What specific areas of your project would you like help with?I would be very grateful to receive comments on what I should have done differently so that my next projects will be much better.
Community feedback
- @Jani-BPosted 2 months ago
Hi,
The solution is very close to the given design. There is few things that might help you:
- If you would wrap the picture and text divs in same "card" container it would help.
- What i did myself -> i made the container flex like you also did. But i also added div class "card" and made that a grid with 2 sides. So that way you can control the "card" more accurately. Now when I change the display size it will brake because the picture container and text container have their own lives.
- Also if you add some @media queries that will take effect for example in 800px width and other one that will take effect in around 400px -> you can change font size, padding etc to make sure the text will not brake your design on very small screen widths.
- Also very important addition. Use the flexbox to justify-content: center and align-content: center to get the items to center the screen. (remember to use height: 100vh for the flex container. -> it will make the height of the container 100% of the screen width so that the item really is centered on the screen).
I hope these comments help you.
Good work with the design :)
1
Please log in to post a comment
Log in with GitHub
Join 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