QR-code component using css, position absolute, google fonts
Design comparison
Solution retrospective
Q1. How can I implement the right layout display for mobile(375px) and destop (1440px)?
Q2. I used "position: absolute" for positioning my div and img classes. Is there a better way for positioning my divs and img? Because when I check the website on desktop and phone, the img and div are not displaying fully in the center.
Community feedback
- @imadvvPosted about 2 years ago
Greeting Jesse Adjomo!! Congratulations for completing your challenge!, 👏👏👏.
I think it's mush easy to use either flex or grid to center every thing perfectly on the center, positions a letter bit tricky to get right.
using grid for example you can do something like this:
body { display: grid; place-content: center; min-height: 100vh; } .rectangle { /* margin-top: 180px; */ }
you start by giving
min-height: 100vh;
to the body, to fill screen size, and applying gird proprieties to it, or you can use flex, either one of them will give you similar result.and just remove that
margin-top: 180px;
from rectangle.overall, Hope this give you some hints, Happy codding, and have a good day/night
Marked as helpful0@Bahbah89Posted about 2 years ago@imadbg01 Thanks for the feedback. I've taken note of the grid / flex technique and will use it in the next future challenge :).
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