Mobile first using SASS and BEM + vanilla js

Community feedback

• 

  P

  Marko Nikolajević•1,065

  @MarkoNikolajevicPosted over 3 years ago

  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 :)

  0

  ---

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  Hi there @MarkoNikolajevic Thank you for your advise. I thought about this but decided to hold on, as the button moves in every change of resolution (e.g. even from 1440 to 1400). This is because I couldn't add button to the slide itself (that would create two buttons in two slides) so I decided to put it outside of slides but to position it I used position: absolute. The similar issue is with background images, they change every few pixels. I think there should be a change in html or css but spent a lot of time to think about it. The only solution I figure out is to add it to slide and then add slides via js but it is alright for 2 slides but for the future improvement seems like it is a quite pointless to add so big html parts via js.

  0

  

  P

  Marko Nikolajević•1,065

  @MarkoNikolajevicPosted over 3 years ago

  @axseinga to avoid button moves you could add position: relative to slider-component div, and I would changed button's position from fixed to absolute. The button position would be based on it because it's a child of slider-component and then position the button. You could set a width or max-width to slider-component to have more control

  0