Design comparison
Solution retrospective
getting the mobile view really delay the submission of this challenge. Pls, your review is welcome and appreciated
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Yusuf, congratulations for your first solution and π welcome to the Frontend Mentor Coding Community!
Your solution is almost finished you've to fix only two things, the background and the alignment, here is my tips for you:
First of all use the correct color for the background:
body { background: hsl(212, 45%, 89%); }
My advice for your is to use
flexbox
to create this alignment. For example, first of all add to thebody
min-height: 100vh
to make the body display 100% of the browser screen size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.body { display: flex; min-height: 100vh; background-color: lightgray; place-content: center; align-items: center; justify-content: center; }
π I hope this helps you and happy coding!
Marked as helpful0@owocodedPosted about 2 years ago@correlucas after setting the body as flex the mobile view is scattered again, pls help out
0@correlucasPosted about 2 years ago@owocoded is the preview site updated I cannot see the error, give me more details this way I help u
0@owocodedPosted about 2 years ago@correlucas yes, it's updated u can check using your mobile phone to see the error.
0@owocodedPosted about 2 years ago@correlucas yes, it's updated u can check using your mobile phone to see the error.
0@correlucasPosted about 2 years ago@owocoded Try to do these changes to avoid the error with the container scaling, instead of margins give it a
max-width
for the size:#bg { background-color: white; border-radius: 2%; max-width: 700px; /* margin-top: 4%; */ /* margin-bottom: 2%; */ /* margin-left: 36%; */ /* margin-right: 36%; */ max-width: 340px; }
Marked as helpful0@owocodedPosted about 2 years ago@correlucas http://GitHub.com/owocoded/QR-code.git My git repository
0 - @vanzasetiaPosted about 2 years ago
Hello, Yusuf Babatunde! π
Congratulations on completing this challenge! π
For this challenge, the styling of the card both on mobile and desktop is the same. But, the problem is on mobile view, the card is not in the middle of the page. I would recommend following the @correlucas's recommendation by making the
body
element as the flex container of the card. This way, the card will always be in the middle of the page regardless of the user's screen size.I recommend using the modern CSS reset by Piccalilli every time you start a new project. This will help you get the base styling right.
For the card element (
<div id="bg">
), there is no need to setwidth
. The card only needs amax-width
to prevent the card from filling the entire page horizontally. Also, there's no need to specifyheight: auto
since by default the element will adapt based on the height of the children elements.I hope this helps! Happy coding! π
0@owocodedPosted about 2 years ago@vanzasetia @correlucas after setting the body as flex the mobile view is scattered again, pls help out
1@vanzasetiaPosted about 2 years ago@owocoded
What is the problem? At what screen size the issue is happening?
I took a look at the site and I didn't notice any issue. So, could you explain the problem by answering the above questions? π
0@owocodedPosted about 2 years ago@vanzasetia Thanks so much, it has been rectify.
1@owocodedPosted about 2 years ago@vanzasetia Thanks so much, it has been rectify.
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