Using CSS Variables

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  Hello @breteo. Welcome to Frontend Mentor Community 🎉!!!

  I have few suggestions to improve your solution.

  HTML 📃:

  • Every website should have at least one landmark like a <main> tag so you can wrap all the content in a <main> tag

  HEADING TAGS

  • Every website should have one heading tag like a <h1>
  • Add this code: <h1>Improve your front-end skills by building projects<h1>

  CSS 🎨:

  • You need to add CSS Reset to your stylesheet

  Here are few CSS Reset you might want to check out:

  • Andy Bell Modern CSS Reset
  • Josh Comeau CSS Reset

  To fix your issue, you can remove the default margin and padding using the * selector

  *{
    margin: 0;
    padding: 0;
   box-sizing: border-box
  }
  
  

  Box sizing

  On your container class you need to remove a few styles and some new ones

  • margin: 0 auto; and margin-inline: auto do the same thing so you can remove whichever one you want
  • Add a max-width so your card won't stretch the whole width of the page

  .container {
      background-color: #fff;
      border-radius: 17px;
      margin: 0 auto;
      margin-inline: auto;
  }
  
  

  .container{
      background-color: #fff;
      border-radius: 17px;
      max-width: /*whatever value you want */ 
     margin-inline: auto;
  }
  
  

  Here is my solution to this challenge qr code component in case you want to look at it

  Hopes this help you and don't hesitate to reach out to me if you have any questions

  Marked as helpful

  1
• 

  Gabriel Nassimbeni•30

  @gabprojectsPosted over 1 year ago

  In my qr code, a padding on "imgBox" and a side margin on "p1" worked fine.

  1
• 

  Holow•100

  @HollowZllPosted over 1 year ago

  Try using margin-left, margin right. Not sure if that's the answer you're looking for, since I see js files and variables in your github page for this project. Either way good luck, I find this challenge more about the css, it's an interesting take to use JS.

  1