Submitted about 3 years ago

QR-code-component Using HTML and CSS

Yu-An•70

@yuany2036

A solution to the QR code component challenge

Preview Code

Solution retrospective

While I was working on this challenge, I came across two issues that I couldn't solve:

When making the edges of the "container" (the one that housed the QR code and the text) rounded by using border-radius, I was unable to make it smooth; for some reason there are somewhat jagged edges
When zooming in on the browser, the top would become cut-off, and I would be unable to scroll to the top to view the content there

Please let me know if you know what is causing the problems, thanks!

Code

Please log in to post a comment

Community feedback

mycrochip•460
@mycrochip
Posted about 3 years ago
Hello Yu-An,

I congratulate you on beginning your journey on Frontend mentor. You'll find so much value in this community.

You've put forward a good solution to the project challenge.

At first glance, I see you've added styles to your <html> element in your stylesheet. As a personal best practice, and I believe, with most developers as well, I do not add styles to my HTML. I prefer to put such styles in the <body> element and if I need an extra container, I'll just nest another <div> element within the 'body' to surround all the current child elements.

The first issue was caused by setting
```
html {
display: flex;
} 
```
The flex container gives its children fluid dimensions when they are not set. So, the body has a width of less than 100% of the available screen.

FIX: Replace the html selector with the body selector as follows:
```
body {
display: flex;
flex-direction: column;
justify-cotent: center;
align-items: center;
height: 100vh;
width: 100%;
}
```
This should fix some layout issues. You'd still need to adjust your card for mobile view.

With regards to the rounded edges being cut off, the culprit here is still the flex layout. The card container (main) is so fixed to the top of its parent which is the body.

FIX: Make the card center on the page which will make it move away from the top. This is not centered currently even if you have a justify-content and align-items set to center because these attribute don't know the dimension of your element (i.e how tall or wide it is). So, you can either set a fixed width and height for the 'main' container (which i don't recommend due to overflow issues of child contents) or give a block margin to the container (or block padding to its parent), e.g:
```
main {
margin-top: 20%;
margin-bottom: 20%;
}

/*OR*/

main {
margin-block: 20% 20%;
}
```
Marked as helpful

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