css grid

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  I took a look at your CSS and the problem is easy to fix.

  /* This is what you have the problem is, that root is loading before import. Root is actually preventing import from loading. That's why the font is not showing  */
  
  :root{
  --Darkcyan: hsl(158, 36%, 37%);
  --Cream: hsl(30, 38%, 92%);
  --Verydarkblue: hsl(212, 21%, 14%);
  --Darkgrayishblue: hsl(228, 12%, 48%);
  --White: hsl(0, 0%, 100%);
  
  }
  @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap');
  
  *{
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--Darkgrayishblue);
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
      
  }
  body{
  background-color: var(--Cream);
  }
  

  Change to this and it should work just fine.

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap');
  
  *{
  margin: 0;
  padding: 0;    
  }
  
  :root{
  --Darkcyan: hsl(158, 36%, 37%);
  --Cream: hsl(30, 38%, 92%);
  --Verydarkblue: hsl(212, 21%, 14%);
  --Darkgrayishblue: hsl(228, 12%, 48%);
  --White: hsl(0, 0%, 100%);
  }
  
  body{
  background-color: var(--Cream);
  font-family: Fraunces
  }
  

  By adding font-family on the body, you don't have to add it on other places, because this will apply to the entire page. Only if you have to use two different font-family then you have to add those font-family where needed.

  Also place root after CSS rest to prevent other problems.

  Marked as helpful

  0

  ---

  

  fernandojeffe•50

  @fernandojeffePosted over 1 year ago

  @hitmorecode thank you very much helped a lot! my how I wasted time to try to solve this and it was so simple thank you.

  0
• 

  Parvez785•180

  @Parvez785Posted over 1 year ago

  Hey, there congrats on completing challenge , You can try adding font fraunces in HTML markup in head.

  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500&display=swap" rel="stylesheet">

  Also you design is not responsive for mobile version, and remove black border displaying around button.

  Let me know if this was helpful

  Marked as helpful

  0

  ---

  

  fernandojeffe•50

  @fernandojeffePosted over 1 year ago

  @Parvez785 Hello, I had left it as a 375px screen. that's why I wasn't going to change it to 600px, I think it's changed now. and thanks for the comments, it helped a lot! I removed the edge of the button as well.

  1