Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Adrian, congratulations for your new solution!
Here’s some tips to improve your component design:
1.Add
background-size: contain;
to make the background display its size asfull width
look that now its displaying the size cropped, an alternative is to use give the background size asbackground-size: 125%
butcontain
is a better alternative.body { background-size: contain; font-family: 'Red Hat Display', sans-serif; background-color: var(--background-color); background-image: url(images/pattern-background-desktop.svg); background-position: top; background-repeat: no-repeat; color: var(--Dark-blue); }
Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
✌️ I hope this helps you and happy coding!
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