Responsive design using SASS with width breakpoints

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, I have to disagree with the comment above, it is not an expected behaviour :) The easiest way to solve the issue is to use position: absolute on the buttons, position: relative on the containing div and then adjust the buttons from the bottom as you see fit. Otherwise nice solution, few issues only. Your buttons are missing hovers and the font-family is the browser's default at the moment, don't forget to set them. :) Instead of using big margins you could also try giving the component a max-width, that would keep it from stretching too much! :) Good luck!

  Marked as helpful

  1

  ---

  

  Zach Hurst•10

  @zatchelPosted about 3 years ago

  @FluffyKas interesting. I was under the assumption that I couldn't use positioning tools like that with Flex, but I also didn't research it, yikes.

  hmm, hover and font are both working for me :/ what browser are you using?

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  @zatchel Why couldn't you? If in doubt, it's always the best experiment, to try things out on your own and see if it works! But what I'm saying surely works as I used it in my own solution to this challenge ^^

  Buttons have default styling that you need to reset/normalize. It means, that unless you set a font-family on the button specifically, it will just use the default (it's unfortunately not enough to set a font-family for the whole body).

  What I meant by hover you can see if you check the "active states" image in the design folder of this challenge. It changes background, border and such. At the moment, you only have cursor: pointer on hover. :)

  Marked as helpful

  1

  

  Zach Hurst•10

  @zatchelPosted about 3 years ago

  @FluffyKas OHHHH I see, well dang I didn't even pay attention to the extra hover effects. Looks like I'm not finished haha thanks for pointing that out! Also yes you're right I did not set the font for the buttons!

  ugh!

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  @zatchel You're not far off from finishing though, good luck! ^^

  1

  

  Zach Hurst•10

  @zatchelPosted about 3 years ago

  @FluffyKas oh would you mind expanding on exactly what you mean by using max-width instead of big margins? for which element?

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  @zatchel On your container, I assume you use that 16.25rem margin to push your container’s width a bit so it’s not stretching as much. Instead of this you could try using max-width. Like a max-width: 800px/50rem (now I’m not sure if these are good values, it’s just an example).

  0

  

  Stanislav Zhechev•75

  @SbZhechevPosted about 3 years ago

  @FluffyKas Why is it not expected behavior and why would you want to get them out of the flow using position: absolute ?

  0

  

  Zach Hurst•10

  @zatchelPosted about 3 years ago

  @FluffyKas ah, i see. that makes sense. thank you! ^^

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  @SbZhechev I suppose it is expected :) It just doesn’t look very nice. That answers your second question.

  I rarely encourage using position absolute where it’s not necessary but in this case I believe it is, as I don’t really know if there’s any other way to align those buttons regardless of the length of the text (which at times is different for the 3 boxes and so the buttons are not aligned with each other). There might be other ways, but I found this solution is harmless and works well :)

  0
• 

  Stanislav Zhechev•75

  @SbZhechevPosted about 3 years ago

  The buttons moving is expected behavior and is not a problem.

  1

  ---

  

  Zach Hurst•10

  @zatchelPosted about 3 years ago

  @SbZhechev Oh fair enough. I couldn't deal with it though, I had to do something about it lol

  0