Frontend Mentor | Andrea Pang's profile

All comments

@04leslie

Submitted about 1 year ago

I found it difficult to position the QR_code exactly at the center of the page, although i watched many YouTube videos. Waiting for your corrections, all feedback welcomed!!

QR_ code challenge using div and container

Andrea Pang• 60

@andiedoescode

Posted about 1 year ago

Hi, congrats on completing the challenge!

I see that you're trying to use the grid layout and you're heading in the right direction.

For your body, you don't need the place-item or padding properties. Instead, add a height property of 100vh. Then in your container, you'll just need to use a place-self property with value of center. This should center your component in the middle of the screen. See below for what I mean.

body {
background-color: hsl(212, 45%, 89%);
font-family: "Outfit", sans-serif;
display: grid;
min-height: 100vh;
margin: 0;
}

.container {
text-align: center;
background-color: hsl(0, 0%, 100%);
border-radius: 15px;
width: 300px;
place-self: center;

If you'd like another option, using Flexbox would be an alternative to easily center a div.

To minimize the amount of repetition, you don't need font-family it in the container class as it's already been declared in the body. Import the Google Font carefully - looking at the head of your HTML, the only Outfit font weight you've linked is 200. The design specifications are for 400 and 700. Once that's fixed in the header, the font-weight properties you've applied to the text in your CSS will show up.

For more pixel-perfect matching, you can play around with the font sizes and the spacing from the top of the QR code image to the edge of the white.

Hope this helps!

Marked as helpful

Jesus• 10

@Jwsxs

Submitted about 1 year ago

There's not so much I can say, but I like this one, it's pretty simple yet challenging.

By the way, I have a question: I notice the qrcode is "always" in center, then I tried doing it with the attributions too and "they" move a little when you change the page's size, how do I make them stay in a fixed position? I used "position: fixed;" and "static;" but both didn't seem to work.

QR code page using basic HTML and CSS

Andrea Pang• 60

@andiedoescode

Posted about 1 year ago

Hi Jesus,

Congrats on completing this challenge! I noticed that you used 'position: static' but then tried to apply top and left properties to it. Static positioned elements aren't affected by these properties, so they are being ignored. In the preview, your attribution div is completely off my screen due to the -50% transform applied. Try using Flexbox on your body (like you've partly done in your div with the content class) to position the content and attribution divs instead of 'position' and 'transform'.

Marked as helpful