Archived topic
Padding Added on Mobile View (Horizontal)
11 replies · Started by Forum User on October 21, 2020
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!
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.
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.
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?
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
Sorry I'm a little bit confused here.
The hampton... URL isn't working for me.
And the spiritlife...URL isn't using GP?
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.
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/
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!
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.
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!
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.