Single Price Grid with Sass

Hi evannor,

Nice work on this project!

The media query works same on both css and sass environment, except in css, you have to wrap your code within the media query.

For example, in css, responsive for a component:

.box {
  width: 50%;
}
@media (min-width: 600px) {
  .box {
    width: 100%;
  }
}

But in sass, you can do either

@media (min-width: 600px) {
  .box {
    width: 100%;
  }
}

or

.box {
  @media (min-width: 600px) {
    width: 100%;
  }
}

They both works.

I personally like to write css from mobile size to desktop size. (AKA mobile first)

Then instead of writing @media (max-width), writing @media (min-width)

This approaching makes it easier to debug, since you are always thinking the changes from small size to bigger size.

I hope my poor English explained clearly 😂

And last but not least, here is a series videos I found that really useful for responsive css: https://www.youtube.com/playlist?list=PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4

Happy coding!🙌