[Support request] Padding Added on Mobile View (Horizontal)

Home Forums Support Padding Added on Mobile View (Horizontal)

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1499185
    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!

    #1499210
    Leo
    Staff
    Customer Support

    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.

    #1502579
    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.

    #1502645
    Leo
    Staff
    Customer Support

    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?

    #1515488
    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

    #1516596
    Leo
    Staff
    Customer Support

    Sorry I’m a little bit confused here.

    The hampton… URL isn’t working for me.

    And the spiritlife…URL isn’t using GP?

    #1516724
    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.

    #1517027
    Leo
    Staff
    Customer Support

    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/

    #1518426
    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!

    #1519245
    David
    Staff
    Customer Support

    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.

    #1519310
    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!

    #1520199
    David
    Staff
    Customer Support

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.