Home/ Questions/Q 8866211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T16:44:01+00:00

I am using a JQuery parallax slider effect. Everything fits the screen on iPad

  • 0

I am using a JQuery parallax slider effect. Everything fits the screen on iPad except when I rotate from landscape to portrait there is a about a 120px right margin that pushes my slider content over to the right.

I have tried setting viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

but this did nothing. when I go to the page directly in portrait it is fine. The right margin is only added when I rotate from landscape to portrait. Portrait to landscape resizes appropriately.

here is example
demo

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A quick, dirty fix would probably be to execute a method to reset the margins when the onorientationchange event is triggered on the body.

    So example code would be as follows:

    <body onorientationchange= "fixMargins()">

....

function fixMargins() {
    var orientation = window.orientation;
    switch (orientation) {
        case 0: // portrait 
            $('div').css('margin-right', '40px');
            break;
        case 90: // landscape left
            $('div').css('margin-right', '40px');
            break;
        case -90: //landscape right
            $('div').css('margin-right', '40px');
            break;
        case 180: // portrait upside down
            $('div').css('margin-right', '40px');
            break;
    }
}

    Obviously this is not ideal and you would prefer an explanation for why this happens. But I just thought I’d suggest this as a quick fix

    • 0