Mobile first slider with mixed CSS techniques and slides animations
Design comparison
Solution retrospective
I made some tests using the Firefox developer tools and also using the "Responsive Design Mode" and looks amazing, but when I close the dev tools, the slider controls moves to a different location, does anyone know how to add DPI to media queries? Which breakpoints did you use? I used only one and a couple of techniques to make the image and the quote to keep on the same level, but I'd like to know of anyone used more than just one breakpoint.
Community feedback
- @rfilenkoPosted over 4 years ago
Hi, good work, but your solution needs some improvements. Why exacly do you need to add dpi mediaquery? Read through this article https://polypane.app/blog/the-complete-guide-to-css-media-queries/. Tips for fixing:
- slider controls are absolute positioned, depending on window height position will change;
- images have distorted proportions, don't set width and height, in % specially, add object-fit;
- would make changes to slide animations, check other solutions for inspiration
Roman
0@alonsovzqzPosted over 4 years ago@rfilenko Thanks a lot Roman, I'll take a look at the article you mentioned and will make the proper changes. Really appreciate it!
0 - slider controls are absolute positioned, depending on window height position will change;
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