Design comparison
Solution retrospective
- With the desktop background image:
I was having difficulty having it only cover the bottom half of the page without repeating so I decided on having it cover the entire background starting at 380px. Any tips or hints to solve this problem would be appreciated.
Community feedback
- @NwaforkenePosted over 4 years ago
Bro, did you make use of a framework like bootstrap or you used on HTML & CSS??
0@MatthewKissingerPosted over 4 years ago@Nwaforkene
This was done with HTML and CSS. I've only dabbled a little bit with bootstrap in the past. I usually end up just breaking bootstrap so I try to do without it.
0@NwaforkenePosted over 4 years ago@MatthewKissinger wow..because i've been trying to use just HTML & CSS but it doesnt come out well...seems i'll have to take a look at your code..Although i'm still gonna learn bootstrap tho.. Thanks man
0@MatthewKissingerPosted over 4 years ago@Nwaforkene
I went through this great 21day course for responsive web design from Kevin Powell. It was free and taught me a lot about using containers, widths, and media queries. It's practical and won't take you 21 days. Highly recommended.
Here's the link: https://courses.kevinpowell.co/conquering-responsive-layouts
0@NwaforkenePosted about 4 years ago@MatthewKissinger
Alright bro... I'll take a look at it.. Thanks
0 - @SahasSauravPosted over 4 years ago
use background-size:contain background-repeat: no-repeat and background-position: bottom for background image
0@MatthewKissingerPosted over 4 years ago@SahasSaurav
Thank you for this! I had no idea about background-size: contain.
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