I need the breakpoint for iPad landscape only. I need to make some specific styles or iPad landscape only. How do i set this break (mediaquery) in my SCSS stylesheet?

1 Answer 1


You will need to add a new mixin in the _breakpoint.scss. Try to add this

@mixin bpIpad(){
  @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2){@content}

this is for ipad 3 and 4, for ipad 1 and 2 the last line should equal one.

Then just @include the mixin in the places you want. ex:

@include bpIpad(){
   *Ipad landscape css*
  • I just test. Its compiling now, but unfortunately it has no effect on iPad landscape...?
    – Meez
    May 28, 2015 at 18:37
  • are you testing for ipad 3 or 4? May 28, 2015 at 18:38
  • i am testing on ipad 4
    – Meez
    May 28, 2015 at 18:47
  • Ok, try adding the @include bdIpad(){} at the end of the file or at least after the last reference to the element you are changing the css for. Because if there are css codes of the same hierarchy then the one that appears last gets applied May 28, 2015 at 19:00
  • no sorry no result.
    – Meez
    May 28, 2015 at 19:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.