Design comparison
Solution retrospective
-
Had an issue with vertically centering the "container". When using position: absolute, desktop version was OK but I could not vertically center mobile version (when using media query). What is the best solution for this?
-
When using bootstrap for layout and bootstrap breakpoints, I could not get the image to change properly - the transtition is not fluent and is problematic on the breaking point (1200 px in this case). Is this doable with bootstrap or should I use own media query for such layouts?
Community feedback
- @Ryan-ZaynePosted over 2 years ago
Hi there Kefiiiir🕵️♂️ Personally to your first question, I feel just the application css flexbox will make getting your layout to be absolutely responsive on all viewports a breeze.
For instance, in the case of vertically centering your "container", flexbox's Align Items property will do just that in a jiffy (which applies when flex direction is set to row), and this will remain applied regardless of the viewport size.
You can try checking out the amazing flexbox tutorials available on youtube, theodinproject website or even the flexbox free tutorials on flexbox.io by Wes Bos!!
Hopefully this will be of help to you. Good luck👋
Marked as helpful0@kefiiiiRPosted over 2 years ago@Ryan-Zayne Hi Ryan, I really appreciate your advice. I tried to do the layout again using flexbox and it worked perfectly.
0@Ryan-ZaynePosted over 2 years ago@kefiiiiR You're welcome man. Glad it worked out for you🤝
0
Please log in to post a comment
Log in with GitHub
Join 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