Design comparison
Solution retrospective
I faced problem when adding color to the ability titles "Reaction, Memory" etc. Is it because of CSS specificity issues? Help is much appreciated. Hare krsna!
Community feedback
- @markuslewinPosted over 1 year ago
The
url()
should be relative to the URL of your CSS. The browser is looking for the font inside/results-summary-component/css/assets/fonts/
, but the font is hosted at/results-summary-component/assets/fonts/
. Try changing thesrc
of the@font-face
tourl("../assets/fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
.The preview for this challenge looks a bit strange because they screenshot the site using a different height from the one in the design.
Marked as helpful0@ItachidorriPosted over 1 year ago@markuslewin Worked like a charm! Small mistakes haha
1 - @FanushhhPosted over 1 year ago
Hello there,
Good job on your solution so far. And to answer your question, yeah, it due to specificity in your CSS. The problem here is that you are specifically setting the headings of the subcontainer flex-2 section to be black which is quite specific in general. I would suggest before setting up a new project to study the design, see which font color dominates the layout and set a general font color on your body tag and then, when you reach a component/section/title whatever that has a different color, set it only for that.
My advice, remove the sub-container-2 h2, h3 colors, add 4 new classes that have the name corresponding the summary items in your html. For instance, summary-item one is red, so created a class called 'red', and add the appropriate properties to change the font color and background color according to the design.
Hope that helps and happy coding! Fanush
Marked as helpful0@ItachidorriPosted over 1 year ago@Fanushhh Thanks for the help, If you're available can you also check other problems that i've faced.
0 - @visualdennissPosted over 1 year ago
Hi,
Regarding font-family, alternatively you can use this method: Add this to on very top your CSS file:
- @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,500;0,700;1,800&display=swap");
and you can use it like so then:
- font-family: "Hanken Grotesk", sans-serif;
Hope you find this feedback helpful!
0 - @ItachidorriPosted over 1 year ago
- Another Question I'd like to ask is the font-style 'HankenGrotesk' isn't working. Can someone tell why?
- Also the design looks way ugly when it is shown in the design comparison window of 'frontendmentor', however when you check the design in 'preview site', it looks decent. Can someone explain why?
0@FanushhhPosted over 1 year ago@Itachidorri I think it's mostly because of the font-family, try this: font-family: 'Hanken Grotesk', sans-serif; The same applies for your font face settings, put a space between them and it should work
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