Content not centered / zoomed out in mobile display mode

  • Resolved nioni

    (@nioni)


    2 years, 3 months ago

    Hi,

    I need your help and advices please.

    I encounter an issue with the mobile display mode.

    Indeed, on the mobile display, the display seems to be zoomed out until a specific scrolling position that the display is normal. I have contacted WordPress support. To resume their answer, they think that it looks like it is related to the slideshows that slide in using animation. The problem is that the animations seem to use a broader width than the width of the screen, adding a horizontal scroll bar to the site on mobile. Once the animation played the scroll bar disappears.

    I did a test by removing all pictures of my home page, it is partially true. But the issue also occurs when i use normal pictures…

    Here is the link of my recording (WeTransfer) :

    https://we.tl/t-jYCfQDNG2J

    Do you have some advices or do you have a solution to help me please ?

    By the way, I am very happy by wordpress and its plugin (yours included) :).

    Sorry for my english, I am french (we are reputed to do not speak english very well i know ^^).

    Best regards,

    • This topic was modified 2 years, 3 months ago by nioni.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter nioni

    (@nioni)

    Sorry, here is the link of my website : https://smartstat.fr/

    Plugin Author websevendev

    (@websevendev)

    The problem is that the animations seem to use a broader width than the width of the screen, adding a horizontal scroll bar to the site on mobile. Once the animation played the scroll bar disappears.

    You’ll probably need to hide the overflow of some element that contains animations (so that the animated elements can position themselves outside the container without causing a scrollbar).

    The best selector for that depends on your theme, so it may also break something if some other feature requires overflow to be visible, but for example, this custom CSS should do it pretty safely:

    article .entry-content {
  overflow-x: hidden;
}

    But if you add animated elements outside the post content, in a template or something, then you’ll need to prevent overflow higher up in the tree, such as body > .site, it just affects more things and has a higher chance of conflicts.

    Thread Starter nioni

    (@nioni)

    It works ! Many thanks !!!! ??

    Have a nice day !

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Content not centered / zoomed out in mobile display mode’ is closed to new replies.