Submitted 11 months ago

Building a QR Code design

joenigiri• 10

@nrl-izah

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I am absolutely new to HTML and CSS so I find it quite overwhelming at first. Though I managed to complete it in 3 hours, I'm not quite sure if my solution is good. As a disclaimer, I think my solution can only be opened on a desktop browser (I'm not entirely sure).

There's this particular part that I don't really understand:

.attribution {
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 99%;
    padding: 20px 0;
}

It was supposed to put the text at the center bottom of the body but, if I put width: 100% It's not quite at the center.

The HTML part is here:

<div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Nurul Mohamad</a>.
</div>

Also, any advice on how to learn HTML and CSS effectively is welcome!

Community feedback

Jeuri Morel• 1,405

@JeuriMorel

Posted 11 months ago

The body element has a margin of 8px by default. This adds 16px to the width on top of the 100% of the attribution. Giving the body a margin of 0 fixes the issue you're having.

The image isn't showing up when I view your site; check that you're properly linking it.

Marked as helpful

joenigiri• 10

@nrl-izah

Posted 11 months ago

@JeuriMorel My bad, I think I've properly linked to the live site now. I also have tried what you suggested. It worked! Thank you!

Jeuri Morel• 1,405

@JeuriMorel

Posted 11 months ago

@nrl-izah You're welcome! I can see the image now.

Carlos Villarta• 260

@caloyv

Posted 11 months ago

Hi, its going to get complicated if you keep using the position: absolute; on every parent elements especially if your code gets longer and a lot more content. And if you don't quite get how position absolute works, basically when you set a tag as position absolute, that tag will look for the closest parent tag that is set to position: relative;, and if it didn't find one, the body tag the will automatically be the relative. But, I would suggest that you learn flexbox first and stop using position absolute for now. It'll make layouting much easier.

Also, most html tags' default display property is block, that's why you don't have to set the display: block on the body tag.

joenigiri• 10

@nrl-izah

Posted 11 months ago

Hi @caloyv ! Yeah I think I’ve read it somewhere it will get harder if I keep using absolute/relative but I still don’t quite get it when I did this just now. Thanks for pointing that out. I will try to explore what you suggested for the upcoming projects and make my learning plan more strategic in the future. Thanks😆

Please log in to post a comment

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