Padding Added on Mobile View (Horizontal)

[steph.waszak@gmail.com]

Hi,
I searched the forum and tried some solutions but I can’t seem to find one that works. My website, when I turn my phone horizontal seems to have padding on either side as a default. Then if I have it vertical, if I pinch the screen down there’s some extra padding on the right side (so as I am browsing the site kind of goes off center).

Any ideas? I assume it could be a margin or some padding I can’t find. I tried removing all of my CSS, the padding in the content area of the layout, etc but it didn’t seem to make a difference.

Thanks!

[Leo]

Hi there,

Looks like something to do with Visual Composer as seen here:
https://www.screencast.com/t/e3GF9blZqkE

I would recommend checking with their support first.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[steph.waszak@gmail.com]

I would agree with that, except it also does this on pages where I am using the classic editor such as the one in the notes below with is just plain text in the classic editor.

I removed all my custom CSS and still happened.

I also completely deactivated VC and the padding remains.

So I’m not completely sure that’s the problem here because I think it would go away if I deactivated it? Any other ideas would be appreciated! I think I’ve tried everything I can think of.

[Leo]

I just tested the testimonials page and don’t believe I’m seeing the issue.

I’m also seeing a wprt-container which isn’t a theme element:
https://www.screencast.com/t/gfGwE58Jqd

Are you able to show a screenshot of what you are seeing so I can make sure that I’m not missing anything?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[steph.waszak@gmail.com]

Hi Leo,

Apologies for the delay in response. I did not get an email about your response and then I was away for a bit. The testimonials page does not use WP Bakery but I will look in to this coding.

Do you think the padding I am seeing (I attached 4 screenshots below, 2 of the main page, 1 of the testimonials page, and 1 of the teams page – you’ll see it on the left and right) could have something to do with my phone (iPhone 11, iOS 14.1) itself? I actually just checked some other sites and it seems to be happening. I put two other sites I use GP on below. One is just a straight up blog and one is a store…all seem to have this issue. I had a friend with an Android phone try and hers seems to be full screen as are all the simulators I try. So it’s kinda weird! I never noticed it until recently.

https://ibb.co/6FLfKGr
https://ibb.co/80BrWN7
https://ibb.co/sqGPB6M
https://ibb.co/qYTNJ4m

[Leo]

Sorry I’m a little bit confused here.

The hampton… URL isn’t working for me.

And the spiritlife…URL isn’t using GP?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[steph.waszak@gmail.com]

Hm, I thought SpiritLife was. Anyways, that’s not the point. I was just showing you examples of other sites I’ve used the theme on that also have the same problem. (I put the correct link below + another one I know is for sure GP!)

In either case, the thing I am concerned about is that the website is not filling the entire screen in landscape mode. But even sites I have not used the theme on seem to have the same problem..so again I wonder if it’s not something with the phone and maybe not the theme itself.

[Leo]

Can you check a few sites here and see if you notice the problem?
https://generatepress.com/site-library/

The direct links to them would be https://gpsites.co/site-name/

So for example: https://gpsites.co/marketer/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[steph.waszak@gmail.com]

No problem, I tried these 4 and actually do see it on all 4, it’s a little hard to tell on Dev since it’s white but I also included screenshots of them both portrait and landscape so you can see they’re fine in portrait and then have that padding to the left and right on landscape.

https://gpsites.co/stream/
https://gpsites.co/dev/
https://gpsites.co/marketer/
https://gpsites.co/ethos/

https://ibb.co/WF84d1Q
https://ibb.co/rM9W502
https://ibb.co/qpGtZF5
https://ibb.co/Wn80fTV
https://ibb.co/mvwQ3C1
https://ibb.co/6WsjwFx
https://ibb.co/84KxDnQ
https://ibb.co/THvYNw2

I am seeing it on sites that aren’t GP as well though, so at this point I really am wondering if it’s just a general iphone issue!

[David]

Hi there,

which device are you using ?
The newer iPhones add padding to account for the camera bar and toolbar on landscape mode. But it should rectify that when rotated back.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[steph.waszak@gmail.com]

I have an 11, I noticed that it stopped at the camera on Monday so that’s when I started thinking the phone might be the cause and started checking sites not using GP too.

It does rectify when I go back to portrait mode but then there’s a padding issue on the right (like when I scroll sometimes all the content will move left and I see a scroll bar on the bottom – added a dropbox link to screen recording of that below). I think that might be a visual composer thing though so I am going to try to figure it out with them. Doesn’t seem to occur when I am not using VC but I have to for this client.

Thanks a bunch for your help and working with me to confirm this!

[David]

That horizontal scroll is coming from the VC content.
Looks like the Slider at the top of the page has additional padding / margins that are causing its container to overflow. If i delete that element in the browser developers tools it fixes the issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts