Design comparison
Solution retrospective
I struggled with the sizing a bit on this one, But I think i got it. Can anyone give me a few pointers on how to improve?
edit: I forgot to no repeat the BG im working on it now.
Community feedback
- @correlucasPosted about 2 years ago
Hello again Nugget, congratulations for your solution!
Here's some tips to fix the background issue and some suggestions:
The correct size for this card is
max-width: 340px
and its inner content should havemax-width: 100%
to have the full responsive size less the card padding.First of all add the
white
color to the container:.container { background: white; text-align: center; }
Then to work the background you need first to add
background-repeat: no-repeat
to avoid it repeating and thenbackground-size: cover
to have it with the full width size and aligned vertically with the card:} body { display: flex; background-size: contain; justify-content: center; align-items: center; background-color: #f8f3f3; background-repeat: no-repeat; flex-direction: column; background-image: url(./images/pattern-background-desktop.svg), url(./images/pattern-background-mobile.svg); height: 100vh; font-family: 'Red Hat Display', sans-serif; }
See if works for you Nugget, happy coding!
1 - @lewisbest1Posted about 2 years ago
https://www.youtube.com/watch?v=SR5GxoFhIAU If you need help here a youtube video that will help you.
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