Design comparison
Solution retrospective
Not responsive but similar to the design
Community feedback
- @VenusYPosted 8 months ago
Great work on this challenge! You've done a good job of replicating the design of the page, and the layout is spot on.
In order to improve the responsiveness of your page, there are a few things you could change.
The first thing is that you could remove the
height
property of the body element and replace it withmin-height
:body { height: 100dvh; ❌ min-height: 100dvh; }
This sets the initial height of the body to 100vh but allows it to expand if necessary to accommodate the content.
I noticed that a white box appears behind the card at certain viewport widths.
This is being caused by the main tag having a hard-coded height. If you remove
height: 700px
from the main tag, it will get rid of this problem.While the card is responsive the changes in screen width in the sense that it shrinks and grows along with the viewport, at some screen sizes, you can see the layout breaking a little bit, such as the image not spanning the whole width of the card.
For your card to be more responsive to smaller viewport widths, you could make these changes to your code:
.card { align-items: center; ❌ } .card > div { padding: 0 50px; } .card div { width: 80%; ❌ }
align-items: center
was causing the image to not be able to take up the full width of the container at certain viewport sizes. Removing it solved this issue.However, removing it also caused the div element to no longer be centered in the card.
Adding
padding: 0 50px
and removingwidth: 80%
at the same time achieves the same layout that you had before while still allowing the content to be centered.Other than that, this is a very good solution to this challenge!
Hope this has been helpful! :)
Marked as helpful1@abdellah-abadouPosted 8 months ago@VenusY I want to thank you for taking the time to read my code, and thank you for your suggestions
1 - @Xandros9Posted 8 months ago
hi @abdellah-abadou you design was amazing and i hope more improve and good luck with your future codes
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