Using GRID in desktop version. Issues with typo and background svg
Design comparison
Solution retrospective
Help wanted :)
1.) My font seems wrong, compared with the design master. I don't see why.
2.) The background image does not look correct. Is there a possibility to stretch it over the whole body? The concerning properties are set in css within body.
3.) The Logo.svg in the top left seems too big compared to the design master. I've no idea how to shrink it. width does not work as intended.
4.) the .hero-btn in my css seems very verbose. But I've no idea how to reduce the code here.
5.) I did borders around the social media icon to match the circle optic from the design master. But I messed it up. Is there a "one-fits-all" solution to give social media icons a "working" circle? (The class is .hero-sm-icons in my css.)
Thank you!
Community feedback
- @GerbenDolPosted over 4 years ago
Oops, somehow I managed to hit "Delete" and delete my comment... 😩
So, here's a quick recap of what it said:
- The design could either be using a lighter font weight, or maybe it's the font rendering. Maybe adding
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;will help your font look a bit leaner. 😁 - Add
background-size: cover;to the body to make it fill it all the way - I didn't have issues with reducing it's width. Anything in particular going wrong there for you?
- Making a
<a>look like a button just takes some extra styling. I don't think your styles here are too verbose. 🤷♂️ - Try styling the anchor tag, instead of the i tag to get the circles. Set a equal width and height and center the icon by for example using flexbox
1@Sven72Posted over 4 years ago@GerbenDol Many thanks! The "antialised" and "grayscale" thing changed it for the better. I start to use them regulary.
background-size: cover– ooops. Yes. Your hint concerning the social media icons worked too. Cheers, Sven0@GerbenDolPosted over 4 years ago@Sven72 Great to hear the tips helped you out!
Earlier today I got around to also doing this challenge, and I'm pretty sure the font weight in the style briefing is just wrong, because it's off too much compared to the font stated in the briefing.
0 - The design could either be using a lighter font weight, or maybe it's the font rendering. Maybe adding
Please log in to post a comment
Log in with GitHub
Join 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