Skip to content
Submitted over 1 year ago

CSS margin property

Kaushik Shahare•10
@lKaushikShaharel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I am not quite sure if i used right margin values. And if i am wrong how should i write them properly.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted over 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    Font 🔤:

    • It's recommended that you always use the font provided by the challenge's style guide.To import a font, follow the steps below:

      • Go to the font's page on Google Fonts: https://fonts.google.com/specimen/Outfit.
      • A sidebar will appear with a code snippet that you can use to import the font.
      • Copy this code snippet and paste it into the <head> section of your HTML document.
      • Now you can use the "Outfit" font in your CSS by specifying font-family: 'Outfit', sans-serif;.

    CSS Reset 🔄:

    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

      CSS resets that are widely used:

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
  • Atif Iqbal•3,200
    @atif-devPosted over 1 year ago

    Hi Kaushik, congrats🎉 on completing the challenge. Better take care about following points.

    • Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>

    (why main matters? Read here)

    • For proper centering the container(whole card) vertically and horizontally you can use code as:
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    Or you can learn centering from here.

    • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    Hope you will find this Feedback Helpful.

    Marked as helpful
    0
  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hi, very nice work there!

    Regarding your question about margins:

    I looks like your intention was to center the card on the page by using margins. You can achieve that effect also by using flexbox on the parent container:

    body { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; }

    instead of margin: 10% auto 10% auto. In future, to center horizontally you can also use: margin: 0 auto. But i believe the practice of "margin: 10% auto 10% auto" might run into some breaks in the layouts in more complex projects and produce unwanted behaviour.

    Hope this helps!

    Marked as helpful
    0
  • JoyObaidu•300
    @JoyObaiduPosted over 1 year ago

    Nice work there!

    For the qr instead of using margin : 10% auto ;. You can just put the width to 100% and then add a padding to the element.

    0

Please log in to post a comment

Log in with GitHub

Join 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