@ErayBarslan
Posted
Hey there, congrats on your first solution! Some suggestions:
- It's good to get use to media-query. But using it too much might have side effects on responsiveness, taking the smooth transition away. Also card becomes way too big on wider screens since it's always relative to body. For this challenge you can use
max-width
without the need of media-query. - You don't need container div. You can center your card relative to body. By removing all styling on media-query and .container you can use:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.child{
...
width: 95%;
max-width: 300px;
}
.attribution {
...
position: absolute;
bottom: 0;
}
/* position absolute on attribution perfectly centers the container */
Test it out and you'll see the difference. Also as far as html goes, you can use semantic landmarks instead using div on everything. By removing the container your html inside body can look like:
<main class="child">
<img src="./images/image-qr-code.png" alt="image-qr-code">
<br>
<div class="text">
<h1 class="mob"> Improve your front-end <br> skills by building projects </h1>
<br>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
<br>
</main>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a>.
/* when you link to other pages, adding rel attribute adds security */
Coded by <a href="#">Your Name Here</a>.
</footer>
I haven't touch <br> but for spacing it's better to use margin through css instead br. Hopefully these helps, happy coding :)
Marked as helpful