I did not know what to do at first. I thought I had to make the QR code from scratch (noob haha). Anyway, I figured it out soon, and I had fun doing it. I'm happy to learn how to center image vertically using flex.
I'm not sure if what I did in the text part <h2> and <p> are correct. I wanted bigger margins on left and right of the text so their extent would be narrower than the QR code. Margin-left worked, but margin-right had no effect. So I decided to put them in a text-box with a set width instead. Is there a better way to do this?
Also, because I didn't really browse this website, I did not see the note there to try to use tools like SASS. It's the first time I learned of this term, so I have to check it out. But really, why do you have to use those tools? Isn't CSS enough? Why add another step?
Feedback most welcome.
Thank you!
@madosy
Posted
If a css rule that you added isn't working like what you expected, it can be helpful to inspect the element using developer tools.
For example, I added margin-right: 20px to your p element and inspected it using the chrome dev tool and the margin is showing in orange: https://imgur.com/a/Is5u4fn
Marked as helpful
@aisafaith
Posted
@madosy thank you! This is a good practice.
@Daniel-Bilodid
Posted
Hi, my congratulations you did a great job 🎉
𝐒𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 🛠
🔹 About scss
it is much more convenient for me to work with sсss because of the nesting of elements, check the example
.about {
margin: 0 230px;
margin-top: 75px;
&__img {
display: flex;
justify-content: center;
}
&__btn {
margin-top: 31px;
display: flex;
justify-content: center;
}
}
There is an example from my code and with sccs the code is much more structuring and it is easier to group elements
🔹 You need to put a landmark in your code
simply wrap your code with <main> landmark
📚 The <main> HTML element is intended for the main content (content) of the <body> of the document (page).
I hope it was helpful, you are great, keep up the good work 👍
Marked as helpful
@aisafaith
Posted
@Daniel-Bilodid That's nice! I like that feature too. It will make my css more organized. Thank you for your feedback. And also I will take note of the landmarks.
@Daniel-Bilodid
Posted
@aisafaith glad to help you, happy coding! 💻
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
