Media Queries - In between two widths

Question

I m trying to use CSS3 media queries to make a class that only appears when the width is greater than 400px and less than 900px   I know this is probably extremely simple and I am missing something obvious  but I can t figure it out   What I have come up with is the below code  appreciate any help    media  max-width 400px  and  min-width 900px         class           display  none

User · Accepted Answer

You need to switch your values      No greater than 900px  no less than 400px     media  max-width 900px  and  min-width 400px         foo           display none             Demo  http   jsfiddle net xf6gA   using background color  so it s easier to confirm

User · Answer

x000D   x000D   class   x000D      display  none  x000D    x000D   media  min-width 400px  and  max-width 900px    x000D       class   x000D          display  block     just an example display property    x000D        x000D    x000D   x000D   x000D

User · Answer

Jonathan Sampson i think your solution is wrong if you use multiple  media   You should use  min-width first     media screen and  min-width 400px  and  max-width 900px

User · Answer

just wanted to leave my  scss example here  I think its kinda best practice  especially I think if you do customization its nice to set the width only once  It is not clever to apply it everywhere  you will increase the human factor exponentially   Im looking forward for your feedback      Set your parameters  widthSmall  768px   widthMedium  992px      Prepare your  function   mixin in-between         media  min-width  widthSmall  and  max-width  widthMedium             content                Apply your  function  main       include in-between           Do something between two media queries       padding-bottom  20px

[css] Media Queries - In between two widths

Examples related to css

Examples related to media-queries