Design comparison
Solution retrospective
Struggled with making the background responsive.
Community feedback
- @AGutierrezRPosted over 1 year ago
Hello there 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
-
Try not to set a fixed
width
andheight
as you did with the.card
component. It is better to set amax-width
if you don't want the component you grow. -
For the background, you could use a mix of
vw
andrem
units. In my case, I use these arbitrary values.background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 40vw bottom 53vh, left 42vw top 32vh;; @include media-breakpoint('desktop') { background-position: right 52vw bottom 40vh, left 48vw top 38vh }
The right and left are set with
vw
units because you want to position them relative to the width of the screen. The top and bottom are set withvh
units because you want to position them relative to the height of the screen. Usingpx
will not allow you to have that relationship.
Note: You should replace the
media-breakpoint
mixin with the media query.Marked as helpful0 -
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
BODY MEASUREMENTS 📐:
- Use
min-height: 100vh
forbody
instead ofheight: 100vh
. Setting theheight: 100vh
may result in the component being cut off on smaller screens.
- For example; if we set
height: 100vh
then thebody
will have100vh
height no matter what. Even if the content spans more than100vh
of viewport.
- But if we set
min-height: 100vh
then thebody
will start at100vh
, if the content pushes thebody
beyond100vh
it will continue growing. However if you have content that takes less than100vh
it will still take100vh
in space.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
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