[Resolved] Pop ups on mobile not centred

Home Forums Support Pop ups on mobile not centred

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1387699
    Rachel

    Hi,

    I have a mediavine GDPR cookie popup for European visitors to my site and also a sign-up pop up on my site. They work fine on desktop, but on mobile they are not centred – they are slightly cut off on the right hand side, obscuring the X to close.

    My email provider has suggested it is an issue with iframes not being centred. I recently added custom CSS to force the sidebar to be a certain width until a mobile breakpoint, not sure if this would be causing the issue?

    Are you able to confirm it isn’t an issue with Generatpress? I can send you a screen shot of the issue.

    Thanks,
    Rachel

    #1387872
    David
    Staff
    Customer Support

    Hi there,

    I can’t see that GP would do anything to interfere with a pop ups positioning.
    Are you able to enable it on a staging server so i can see the actual issue?

    #1387995
    Rachel

    Hi David,

    I don’t have a staging server unfortunately..but going to the site on mobile should demonstrate the issue with my optin popup? ALternatively if you have a VPN and connect to France, you will see the cookie pop up.

    I had assumed the issue was with the email provider, but when I saw the mediavine cookie pop up also has the same issue, I wonder if it is an issue with the mobile responsiveness some how.

    Rachel

    #1388003
    David
    Staff
    Customer Support

    I am based in the UK.
    Not seeing the signup pop-up.

    What i do see are these on iPhone 7+:


    #1388006
    Rachel

    Interesting – so the cookies pop up is centred on your mobile, but not on mine (samsung S10 – android).

    When I inspect the page and switch it to mobile view, it isn’t centred either. Confused…

    Rachel

    #1388079
    David
    Staff
    Customer Support

    Tricky especially when there is multiple pop ups.
    Some elements have a width of 100% plus padding but no border-box: box-sizing CSS so they will break out of containment.

    Try adding this CSS to globally set that:

    body * {
        box-sizing: border-box;
    }
    #1388874
    Rachel

    Added the css but it doesn’t seem to have fixed the issue.

    I recently removed Elementor and replaced it with Generateblocks on all pages. I thought I had set the pages to be full width, with the inner container the same for each.

    If I enter the site on a post, the issue doesn’t occur – ie the pop up is centred, so it seems to only be an issue with the pages, so a problem with how I have added the containers..

    I can actually shrink the screen manually and it resizes/centres but not ideal.

    Rachel

    #1389258
    David
    Staff
    Customer Support

    Aah looking in the wrong place.
    On the home page – the first container Block has the Wide Width option set. Can you remove that ?

    #1389280
    Rachel

    Okay, so that seems to have fixed it. I don’t recall selecting the wide width – so not sure if it defaults to that? I also selected the option on the container settings on the right to make the container full width.

    So why is the wide width setting causing the issue? When would you use a wide width setting?

    Thanks.

    #1389281
    Rachel

    Is the css I added for the box-sizing redundant or useful to retain?

    #1389287
    David
    Staff
    Customer Support

    the Wide Width and Full Width options found in the Block toolbar are the hacky CSS method that core blocks use to make a block expand outside of a limited width container. So they are totally useless on full width containers.

    They are not enabled by default but their UI is terrible so easily enabled without knowing it.
    Unfortunately we’re having to conform with core blocks.

    Both use negative margins to make the element wider. In the case of alignwide those neg margins offset the Container padding – which isn’t present on a full-width-content page … hence the element ends up wider then the viewport.

    We got some ideas on how to make it better so this kinda thing doesn’t happen 🙂 And at the same time there is rumour that WP may drop this method as its prone to break stuff.

    box-sizing shouldn’t be required now.

    #1389292
    Rachel

    Ok thanks. So when I create a page and add a new container, if i set the “Make page full-width” option on (in the block settings in the right panel) I shouldn’t then have to specify full width or wide width in the block options toolbar?

    Thanks so much for your help, now need to check all the other pages..!

    #1389293
    David
    Staff
    Customer Support

    Thats correct 🙂
    Glad to be of help.

    #1389297
    Rachel

    THanks again – fantastic support, really appreciate it. Have a great day!

    #1389312
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.