Skip to content
Submitted over 2 years ago

QR code simple solution /w margins

Kimue•200
@dratinixgithub
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

Any simplistic way to actually center the img in the container instead of playing with margin values ?

Community feedback

  • Brian Johnson•210
    @BrianJ-27Posted over 2 years ago

    Kimue, hey!

    So great job in coding this out, the design is pretty much spot on. To answer your question first, remove margin-top, margin-bottom and margin-left styles from your .card-container__img class. Then change the width on that class from 250px to 100%. Next, on your .card-container class, add the shorthand padding property of 10px to create even space around your qr image and that should do it my friend! Let me know if that works for you.

    Also there were a few things I noticed in your code that can remove the accessibility and HTML flags.

    • To remove the 1 accessibility flag on FEM, you need to have a level one heading (a.k.a) an <h1> tag in your project. The way you can fix this is simply replace your <h3> tag with an <h1> tag and reduce your font-size if need be to make it fit the design.

    • Also <article> & <section> tags per web coding standards should have a heading tag nested within them. In your code, you have no heading tags nested within those tags which is why you are getting those 2 HTML issues. To fix that, change them to divs. Like this:

    <section class="card-container"> to <div class="card-container"> 
<article class="card-container__img"> to <div class="card-container__img">
    • Regarding using a background-image to bring in the qr image, it would of been better here to use an <img> tag. Using an image is good for a few reasons. One thing is it has more semantic meaning. Also if you want your images to be indexed by google use an img tag. Background images aren't indexed automatically. But you are not totally wrong to use it here. Just think about when it is appropriate to use them and when it is better to use img tags. Here's a good article on this: Img vs Background Images

    Hopefully this helps and happy coding!

    0
    Kimue•200
    @dratinixgithubPosted over 2 years ago

    @BrianJ-27 Make some fixes thanks to ur explanation about style and i have better knowledge about html issues. I still having the background image and will try to work with img tag in the next project.

    Thanks for ur feedback

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Good job

    Keep up the good work

    Your solution looks great however I have some feedback

    • The card is missing a box-shadow using box-shadow

    Lets talk about your accessibility issue

    • Page should contain a level-one heading <html lang="en">, this is caused by not having any h1 tags in your document.

    I hope this helps

    Cheers

    0
    Kimue•200
    @dratinixgithubPosted over 2 years ago

    @TheCoderGuru Honestly, i can't see the box-shadow in the card design. Its my screen or its in the 'web coding standards'.

    Also, about the h1 tag: Can i just add one h1 empty tag in the code? i mean, i'm just asking because i can make the h3 a h1 and fix the font size as well.

    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