Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using GRID in desktop version. Issues with typo and background svg

Sven 295

@Sven72


Design comparison


SolutionDesign

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

Gerben Dol 3,115

@GerbenDol

Posted

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

Sven 295

@Sven72

Posted

@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, Sven

0
Gerben Dol 3,115

@GerbenDol

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

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