Had some difficulties to center everything.Would love any kind of help
Design comparison
Community feedback
- @The-BoxHead-GuyPosted 10 months ago
Hey bro, nice to meet you
body { background-color: rgba(213, 225, 239, 255); margin: 0; padding: 0; box-sizing: border-box; align-items: center; display: flex; justify-content: center; /*! margin: 14rem 20rem; */ font-family: 'Outfit', sans-serif; width: 100vw; height: 100vh; } .container { background-color: white; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; /*! height: 100%; */ /*! width: 25%; */ } img { /*! width: 66%; */ /*! height: auto; */ /*! border-radius: 1rem; */ /*! margin-left: 4.4rem; */ /*! margin-top: 1rem; */ width: 20rem; border-radius: 0.5rem; } h1 { color: rgba(104, 111, 125, 255); font-size: 1.35em; text-align: center; width: 25rem; } p { color: rgba(150, 155, 161, 255); font-size: 0.95rem; text-align: center; } .qr-container { display: flex; justify-content: center; align-items: center; flex-flow: column; padding: 2rem 0.5rem; }
I've edited your app's css stylesheet, I've highlighted the changes within "comment blocks" and since I've seen that you like to work with flex, I adjusted the solution using it.
If you want to go through it in detail, let me know
Marked as helpful1 - @hassanmoaaPosted 10 months ago
Hello @Shuhratov!
Congrats 🎉!
Here are some suggestions..
1.Remove the margin from the body, never put any margin on the body or the html.
2.Remove the width from the H1 element, instead adjust your font-size
3.Increase your container’s width or set a max-width instead to make it bigger than the elements inside
4.Make your image
display: block;
body { margin: 0; margin: 14rem 20rem; } h1 { width: 25rem; } .container { width: 25%; } img { width: 66%; height: auto; }
1 - @Orekihotarou-kPosted 10 months ago
Hi there @ShuhratovSuhrob, congrats on completing the challenge. In order to properly center the qr-container element, I would recommend that you use CSS flex-box or CSS grid. With CSS grid, the styles should look something like this container styles
.container { display: flex; align-items: center; height: 100dvh; }
qr-container styles
.qr-container { max-width: 300px; *setting a max-width ensures that the element doesn't grow past 300px* margin: 0 auto; or margin-inline: auto; padding: 1rem; border-radius: 1rem; *all other styles* }
I noticed that you didn't create a reset to override the default styles. different browsers interpret styles differently. A reset sets all basic styles (like margin, padding, font size) to the same starting point, like preheating your oven, so your website looks the same across all browsers. This helps avoid surprises and makes your life easier! A basic reset might look something like this
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
But it doesn't end there. Resets can be created to target specific elements like in this article about modern CSS resets Modern CSS resets by Andy Bell. I just created a YouTube channel where I do frontend challenges and this one was the first one I did. Feel free to take a look Qr-code-component-solution
0@ShuhratovSuhrobPosted 10 months agoHello @Orekihotarou-k, good day!
I have looked into your youtube channel and found helpful codes that I will be using too. Thank you for the recommendation.
As for the codes, let me take a look at everyone's solutions and try them out too. I will reply back when everything is done
Happy coding!
0 - @rawannmmohamedPosted 10 months ago
Hello, you can solve this problem by setting the container width to 300px to make it fixed.
have a nice coding !
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
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