@BrianJ-27
Posted
Hi @Lou I think you did a good job here but I wanted to show you something. If you open up your inspector tool, you'll notice your content is not going to the bottom of the viewport page. This explains why your card is not perfectly center on the page. How do you fix that? Here's how:
- first remove all flex styles from the
<body>tag. I know it sounds a little weird, but trust me on this. ;-) - Next you have a
<div>tag that has no class associated to it. What I would do here is first change that<div>tag to a<main>tag for accessibility reasons, then cut theclass="container"you have on the one div and paste it on the<main>tag. Then rename that class from container to `class="card" because that's what it is. Let me visually show you what I mean.
<body>
<main class="container> // changing your div tag to a main tag
<div class="card"> // rename your class from container to card
<img src="images/image-qr-code.png" alt="QRCode" class="qrcode">
<h1>Improve your front-end skills by building projects</h1>
<p>...content </p>
</div>
</main>
</body>
-
Now on the
class="container"addmin-height: 100vh. What this does is, makes your container content area go all the way to the bottom of the page. Next you add back those flex properties,display: flexjustify-content: centeralign-items: center. Once you write those flex styles, this will perfectly center your card on the page! you can then remove themargin-top: 100pxstyle bc you won't need it. -
another thing you want to think about is using rem units in lieu of pixels. Pixels are fixed units and don't play well with making responsive layouts so try to think about this for future projects.
-
on your img styles, you don't want to use fixed pixel widths because your image won't scale. On the width I would use
max-width: 100%in lieu of width.
Sorry I wrote a lot of things to change but try to implement these things and see if it helps you :)
Marked as helpful
