Pop ups on mobile not centred

[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

[David]

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?

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

[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

[David]

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

What i do see are these on iPhone 7+:

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

[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

[David]

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;
}

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

[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

[David]

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

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

[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.

[Rachel]

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

[David]

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.

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

[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..!

[David]

Thats correct 🙂
Glad to be of help.

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

[Rachel]

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

[David]

You too!

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

[Author]

Posts