@khophisnow
@mbaah13
Submitted
what I found difficult was positioning the card to be aligned I the middle of the screen as display flex was not working.
the media query part of the code is what I'm unsure about my question would be on the media query, the transition from mobile to desktop is not smooth, how do I do that.
@khophisnow
Posted
@mbaah13. You have to include your ** images folder ** to your github account. In CSS the perfect way you can center an element is set the display to flex , justify-content to center and also align-items to center. The Height is a key to this type of centering. Excluding it will not be perfectly centered. illustration:
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>
<div class="container">
<div class="container-wrapper">
<img src="images/image-qr-code.png"/>
<div class="qr-info">
<h2>
Improve your front-end skills by building projects
</h2>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Maggie Baah</a>.
</div>
</div>
</div>
</main>
</body>
</html>
I hope you find this helpful and mark it as helpful. Great work by the way you did good. Keep up the good work and you will be advanced in no time. Thank you. If you find this
Marked as helpful
@maksymXlol
Submitted
😄
@khophisnow
Posted
Hello @maksymXlol , Please do well to check the mobile preview of this challenge I think there is some problem with your design at that view. But anyway you did a wonderful work good job 👏 . I hope this will be helpful. Feel free to ask any questions. Thank you 🙏
@NeilAndrewReyes
Submitted
This is my first project created using HTML and CSS. It is very important for me to hear your thoughts about how i write my HTML and CSS files. Also, does my way of centering things is the effecient way or is there another more effecient way of doing that kind of stuff. Thank you very much for the time and the attention that you will give to review my work.
@khophisnow
Posted
@NeilAndrewReyes. In CSS the perfect way you can center an element is set the display to flex , justify-content to center and also align-items to center. illustration:
display: flex;
justify-content: center;
align-items: center;
}
A typical example include.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Perfect Centering</h1>
<p>A flex container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>
<div class="flex-container">
<div></div>
</div>
</body>
</html>
I hope you find this helpful and mark it as helpful. Great work by the way you did good. Keep up the good work and you will be advanced in no time. Thank you. If you find this
Marked as helpful