Results summary component/ Flexbox

Community feedback

• 

  P

  markus•2,250

  @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 the src of the @font-face to url("../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 helpful

  0

  ---

  

  ShyamCanCode•90

  @ItachidorriPosted over 1 year ago

  @markuslewin Worked like a charm! Small mistakes haha

  1
• 

  P

  Mihailescu Fanush•690

  @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 helpful

  0

  ---

  

  ShyamCanCode•90

  @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
• 

  P

  visualdennis•8,375

  @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
• 

  ShyamCanCode•90

  @ItachidorriPosted over 1 year ago

  1. Another Question I'd like to ask is the font-style 'HankenGrotesk' isn't working. Can someone tell why?
  2. 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

  ---

  

  P

  Mihailescu Fanush•690

  @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