@saularanguren
Posted
Greetings, your solution is really impressive, however, I am going to help you with some tips so you can improve your web layout skills.
Start by eliminating code blocks (grouped lines) that are unnecessary in your project:
<!-- displays site properly based on user's device -->
<!-- Feel free to remove these styles or customise in your own stylesheet ๐ -->
<!-- Improve your front-end skills by building projects
Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div> -->
These lines of code, including the comments, are not playing any role.
Let's continue with improving your semantic html, replace the <div class="qr-code-container"></div>
tag with the <main class="qr-code-container"></main>
tag and replace the <div class="text-cont"></div>
tag with <section class="text-cont"></section>
, this is how your project should look:
<main class="qr-code-container">
<img src="images/image-qr-code.png" alt="" class="qr-img">
<section class="text-cont">
<h3>Improve your front-end skills by building projects</h3>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</section>
</main>
Finally, you must eliminate the <div class="wrapper">
tag and the last </div>
, it should not be equieta, that is what body is for because this will be as its name says the main body of your page, and don't forget to change the .wrapper
class in the css to body
, eliminate the width: 100%;
css rule, it is not necessary and modify the height: 100vh;
rule to min-height : 100vh;
, by saying min-height you are telling the browser: it does not matter if my website is much longer than the user's screen, it will not be limited, otherwise it will be limited and will not let you scroll if the page is longer
body {
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
display: flex;
align-items: center;
justify-content: center;
}
happy codign ๐
Marked as helpful
@GSida015
Posted
@saularanguren thank you for your feedback,I appreciate it and will consider your advice in my future projects!๐ช๐ป๐