Mobile first, SASS and BEM.

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Agnieszka! 👋

  Well done with this challenge! Since you're familliar with flexbox i'll show you how you can horizontally and vertically center your wrapper without using position: absolute. Wrap your whole .wrapper in another div and add class to it (for example name it component). Add these styles to this element: justify-content will center it horizontally and align-items vertically. min-height 100vh is to make sure our component will take full viewport height.

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px;
  

  And then you have to remove your existing styles for .wrapper and media queries and keep few of them, like this:

  .wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    overflow: hidden;
  
    @media only screen and (max-width: $bp-smallest) { <--- remove this!
      margin-top: 60%;  <--- remove this!
    } <--- remove this!
  
    @media only screen and (min-width: $bp-desktop) {
      flex-direction: row;
    }
  

  Lastly, for your .wrapper__box change width: 200px; to for example max-width: 350px; to take full width of container but it'll never cross 350px width.

  Good luck with that, have fun coding! 💪

  0

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @tediko Additionally you can change your $bp-desktop: 26rem; breakpoint to be 30rem. This way you'll prevent your box to be squished on small resolution before mediaquery break your layout to column ;)

  0

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  @tediko Thank you so much for the time you take to show me the way how to center with flexbox :) I already applied your tip and it all works beautifully. I felt that the problem might be the hardcoded values. I really appreciate your help and advises. Thank you!

  0