Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first slider with mixed CSS techniques and slides animations

P

@alonsovzqz

Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

Roman Filenko 3,335

@rfilenko

Posted

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

P

@alonsovzqz

Posted

@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

Please log in to post a comment

Log in with GitHub
Discord logo

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