Skip to content
Submitted over 4 years ago

Mobile first using SASS and BEM + vanilla js

P
Axseinga•540
@axseinga
A solution to the Coding bootcamp testimonials slider challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there,

The website looks good only at the 375px and 1440px resolution. Please let me know how I can improve my code so it is more responsive and looks alright in every resolution. The biggest struggle for me is to position elements on top of each other - the background does not resize accordingly and the buttons go over the place. The flexbox containers resize ok on mobile version however they do not on the desktop and I do not know from where it comes from.

All feedback really appreciated! Thank you!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    HI Agnieszka, you did a good job on this challenge

    To make your code more responsive you could add more media queries, for example the tablet view is from 768px or 48rem. In your case you changed flex-direction to row-reverse at 37.5rem...$bp-desktop: 37.5rem;. I would suggest you to create a few more as $bp-tablet: 48rem. I usually use one media query for laptops and one more for desktops (1440px).

    In this way you could have more control on different screen sizes.

    A part of this, your solution looks good

    Keep on coding :)

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