Member Avatar for ebanbury

Hi

I have the following basic CSS only webpage layout
which looks in-line cross Safari/IE browsers on a PC, but out of line on the ipad.

Before I give out a ton of code has anyone got a good checklist of things I should be looking out for on all the divs that I should go through first?

I have various divs, which are centred apart from my navigation div, which is supposed to just run along the entire width of the screen - however on the ipad the blue banner just stops on the right...

Many thanks for the help!

  • 1 Contributor
  • 1 Reply
  • 128 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by ebanbury

Dani AI

Generated

As found, the jQuery/CSS slider is the element breaking the layout on the iPad. The symptom (banner background stopping short) typically comes from a combination of fragile absolute-centering with fixed offsets and the slider or images being initialized with fixed widths that don't respond to the device viewport or orientation changes.

Recommended, practical checks and fixes:

  • Ensure a responsive viewport is set in the document head:

    <meta name="viewport" content="width=device-width, initial-scale=1">

  • Make the slider container fluid and use a safer centering method instead of fixed left offsets and negative margins. Example responsive CSS (use your actual class names):

    .slider-wrap {
  position: absolute;
  left: 50%;
  top: 330px;
  transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  box-sizing: border-box;
}

.slider-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

    Or avoid absolute positioning entirely and center with margin:auto if the layout allows.

  • Check the slider plugin for hard-coded widths or one-time sizing. If the plugin computes sizes on init, force a recalculation on device rotate/resize:

    $(window).on('resize orientationchange', function(){
  // call the slider/plugin method that recalculates widths or re-initialize safely
});

Debugging tips: enable Web Inspector on the iPad (Settings > Safari > Advanced > Web Inspector) and inspect the page from Safari on macOS to view computed widths, margins and overflow. Look specifically for container width, overflow/hidden, and any inline styles the plugin injects.

Summary: add a viewport meta tag, switch to a responsive container (percent width + max-width or transform-centering), make images fluid, and ensure the slider reflows on resize/orientation. These steps address the common iPad differences without a full redesign.

Member Avatar for ebanbury

Hi

I've worked out that it is the jQuery/CSS based revolving image banner that is causing the problem. The main CSS for the container for the whole banner is:

.container{
    position:absolute;
    width:0px;
    height:300px;
    top:330px;
    margin-top:-150px;
    margin-left:-424px;
    padding-top: 5px;
    left: 45%;
        }

If anyone knows how I can change this so that it squishes up on the page for ipad like the rest of the page that would be great!

Many thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.