cssresponsive-designsassmedia-queriesneat

setting breakpoints in sass with min and max width

Hey guys i am trying to work on a responsive layout but somehow i am not able to fix the min width for this one.

$mobile: new-breakpoint(max-width 480px 4);
$tablet: new-breakpoint(max-width 768px 8);
$desktop: new-breakpoint(max-width 1336px 10);
$desktopxl: new-breakpoint(max-width 1550px 10);

somehow i want the $desktopxl to be only used between 1337px and 1550px But i am not able to set the min width. please help me. thanks. ps: **i tried

 $desktopxl: new-breakpoint((max-width: 699px) and (min-width: 520px)10);

But it didnt work.

Solution

  • You don't need min and mix. all you need is to do min next to max width. like eg. if you max width is 700px tour next level min width should be 701px;

    Try this 

    $mobile: new-breakpoint(max-width 480px 4);
$tablet: new-breakpoint(max-width 768px 8);
$desktop: new-breakpoint(min-width 779px 10);
$desktopxl: new-breakpoint(min-width 1337px 10);