Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Building a QR Code design

joenigiri 10

@nrl-izah

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • 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

P
Jeuri Morel 1,405

@JeuriMorel

Posted

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

0

joenigiri 10

@nrl-izah

Posted

@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!

0
P
Jeuri Morel 1,405

@JeuriMorel

Posted

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

1

@caloyv

Posted

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.

0

joenigiri 10

@nrl-izah

Posted

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😆

1

Please log in to post a comment

Log in with GitHub
Discord logo

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