Results summary component/ Flexbox

Community feedback

• 

  P

  markus•2,700

  @markuslewin

  Posted about 2 years 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.

  01

  Marked as helpful
• 

  Mihailescu Fanush•740

  @Fanushhh

  Posted about 2 years 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

  01

  Marked as helpful
• 

  visualdennis•8,375

  @visualdenniss

  Posted about 2 years 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!

  00
• 

  ShyamCanCode•90

  @Itachidorri

  Posted about 2 years 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?

  01