Design comparison
Solution retrospective
The biggest challenge was keeping the background in its aspect ratio while the page is being viewed at different screen sizes, I couldn't get it to be any better than that and I think it's the biggest problem with my solution... probably not the only problematic thing though :D
All and any feedback is welcomed.
Community feedback
- @ApplePieGiraffePosted almost 4 years ago
Greetings, Yuniac! 👋
Well done on this challenge! 👍 Your solution looks good and is responsive! 🙌
I'd tiny thing or two I suggest,
- Perhaps making the font-size of the heading a little bigger and the font-size of the paragraph beneath it a little smaller so that there's some more contrast between the two (as in the original design). 😉
- Setting
text-align
tocenter
for the paragraph beneath the heading in the mobile-friendly layout of the site.
Keep coding (and happy coding, too)! 😁
1@YuniacPosted almost 4 years ago@ApplePieGiraffe Thank you, will definitely apply your recommendations and see how it turns out, thanks again appliepiegiraffe creature!
0 - @puwiiiPosted almost 4 years ago
Hi Yuniac!
I can see that you have a problem with the footer ul element (Facebook, Twitter, and Instagram logos) there are not centered. You can add this in the media query:
padding: 0;
Have a great time!
1@YuniacPosted almost 4 years ago@puwiii Thank you, will try to apply it and see how it plays out.
0 - @brasspetalsPosted almost 4 years ago
Hi, Yuniac! 👋
background-size: cover
should definitely help you out here, but you could also play around with usingbackground-size: contain
too.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