Responsive view in iPad not as it should be

I’ve used Shapely (great theme!) for a while and never seen this problem before. The homepage is not rendering properly on an iPad, but a similar setup is fine on another site. I can’t work out why. I’ve attached two screenshots from Safari’s iPad simulator 768x1024 (it’s the same on the real iPad). The one with an expanse of grass at the top is the faulty render (see the widget in the lower part of the screen is shifted right and clipped); the one with two people at the top shows how it should look (nicely centred, no clipping). Both sites have a homepage beginning with the same two widgets: both are versions of the Shapely parallax widget: the first with a full-width image and the second with an image at the left. It’s the same in both Safari and Chrome. Both sites have the same (latest) version of Shapely.

The faulty site has quite a complex homepage (lots of widgets, some home-made), but I’m 95% sure it was all working fine on an iPad when I built the site. It’s a live site, so I can’t experiment with it too freely.

I’ve noticed one other thing. Even on a wide desktop screen, the site with the iPad problem displays the widgets shifted slightly to the right (larger left margin).

Is this something I’ve done, or is it a Shapely problem, or a bootstrap problem? I’m at a loss to explain it. Any advice much appreciated.

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

In order to check your question i need to see your live website, please provide url and i will take a look

OK, thanks for the reply. The website URL is https://wef.wessexgp.uk

You need a password to get access: use Bing16

Hi there

Ok, so, your problem is the image under the first parallax image?


If this is the case, this image has big amount of white space around, so, you have to remove this white space

Thanks for the comment, Noda, but the problem affects every front page widget. I’ve downloaded a copy of the site to my local MAMP and I’ll fiddle around with it there, comparing it with a similar site that works until I’ve isolated the problem. My guess is it is related to some CSS I’ve put in. I’ll let you know.

OK, I’ve cracked it!

It was due to some CSS I added. I tracked it down by first deleting all the CSS I had added. Then I added it back, one item at a time, until the problem appeared. I had been trying to reduce the vertical white space between widgets a bit by reducing the padding in sections. This somehow managed to move every widget to the right. This was only obvious in the iPad portrait layout, when clipping occurred, so I didn’t see it immediately. With this item of CSS removed, the rendering all became as it should be.

Sorry to have taken your time, but the very act of posting the problem concentrated my thoughts and led to the solution. Thanks.

Hi there

Thanks for sharing that, glad to hear you found it :slight_smile:
I will close this case now