Submitted almost 2 years ago

Building a QR Code design

@nrl-izah

A solution to the QR code component challenge

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!

Code

Please log in to post a comment

Community feedback

Jeuri Morel•1,385
@JeuriMorel
Posted almost 2 years 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
Carlos Villarta•260
@caloyv
Posted almost 2 years 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.

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