0

I have structured my breakpoints like this, i need 1024 break point. i already max-width 1199 getting conflict can some one please help me out with this.

// break-point // ------------------------------

/* Landscape phones and portrait tablets */

@mixin bp-xsmall-only {
  @media only screen and (max-width: 480px) {
    @content;
  }
}

@mixin bp-small-and-below {
  @media only screen and (max-width: 767px) {
    @content;
  }
}

/* Portrait tablets and small desktops */

@mixin bp-medium-only {
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    @content;
  }
}

/* Landscape tablets and medium desktops */

@mixin bp-large-only {
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    @content;
  }
}

/* Large desktops and laptops */

@mixin bp-large-and-above {
  @media only screen and (min-width: 992px) {
    @content;
  }
}

@mixin bp-xlarge-only {
  @media only screen and (min-width: 1200px) {
    @content;
  }
}
Durgesh
  • 33
  • 6
  • 3
    you should only be using either `min-width` or `max-width` media queries. I would recommend only using `min-width` as it is an easy way to keep you styles and breakpoints clean and avoid these kinds of issues – Brady Edgar Jul 25 '17 at 17:16
  • @BradyEdgar but how max i target the max width, my requirement is mobile, tablet, desktop, the given visual outline is. 480px, 1024px, more.. can you please edit my above code.. – Durgesh Jul 25 '17 at 17:22
  • @Durgesh the point is that by using only max-width or only min-width, you can effectively target any screen size by making use of the cascading feature of CSS (which, btw, stands for CASCADING style sheets). This is a question-and-answer site, not a code-writing service. – Our_Benefactors Jul 25 '17 at 17:48

0 Answers0