1

I need to add specific styles for my Responsive site for iPad landscape, but also iPad portrait. What are breakpoints (like @include bp(max-width, $bp-medium) {} ?), which effect separately:

  • only iPad 4 landscape
  • only iPad 1 or 2 landscape
  • only iPad 4 portrait
  • only iPad 1 or 2 portrait

Or maybe some new mixins which i can add?

I really need this because i have to style the menu and icons on iPad Landscape and Portrait.

Improve this question
1
  • 1
    It's a bad idea to design a website based on certain devices as this will mean that anyone else not using an iPad will potentially have issues viewing the website.
    – Daniel West
    Commented Sep 14, 2015 at 15:59

1 Answer 1

Reset to default
2

See the various viewport sizes for ipads: http://viewportsizes.com/?filter=ipad

You can then define variables with these sizes in your skin scss/_var.scss file. You should see the various breakpoint variables defined from line 49 onwards (if you haven't changed those lines till now). After you define the breakpoints as variables you can then use them, for eg:

@include bp(max-width, $ipad-1-potrait) {}

Improve this answer
3
  • Thanks! I discovered iPad 4 is only reacting on min-device-width instead of min-width (or am i wrong?). How do i add this? And how do i handle min-device-pixel-ratio: 2 and min-device-pixel-ratio: 1 in your example?
    – Meez
    Commented May 30, 2015 at 5:17
  • your answer its working now on iPad (portrait and landscape). But when i resize my normal browser the iPad styles also effecting. How can i exclude those styles for the normal browser?
    – Meez
    Commented Jun 1, 2015 at 5:52
  • Media queries is for width, not the device type. The term normal browser is quite vast even if you classify for touch vs non-touch screens. For eg., what about laptops which have touch screen? In responsive design field, it's best to just make a single website and make it responsive based on width rather than device. But after understanding this if you must separate then create separate sub-theme and look at magebase.com/magento-tutorials/…
    – Harshit
    Commented Jun 2, 2015 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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