karan-5• 60
@karan-5
Submitted
I found some difficulty in arranging the components. I am not sure about the vertical alignment of the main container. I want to know about the best practice of aligning the component.
Vlad
@alittlebyte
All comments
- Vlad• 10
@alittlebyte
Posted
Two popular routes for both horizontal and vertical alignment would be:
- Absolute positioning and transform:translate after
- CSS flex on the body and using the properties to center (since you have just a single element)
2 - russel-mempin• 10
@russel-mempin
Submitted
How do I make the transition from mobile to web smooth? When I resize the browser slowly, I can notice the transition of the media query.
Is there a better way to center the qr code and put the footer at the bottom of the page?
Vlad• 10@alittlebyte
Posted
Personal opinion - you might have overcooked it with that query that you don't really need. The QR container stays at the same size both on desktop and mobile, at least according to the screenshots provided in the starter. Not sure if I'm allowed to post the exact dimensions (figured out by error and trial).
Footer's centering seems fine, could switch from fixed to absolute (since there aren't several screens worth of height in content, wouldn't look drastically different). For the QR container you can also go the position route, adding a transform:translate. Was about to suggest flex on body, but you do have a footer. Would require a second wrapper for the .qr-code div and using the flex on it, so it alone gets affected.
0
