Form not displaying on mobile portrait orientation

Actually, I removed all of the queries from the pages in question and the form still does not display in portrait mode. Have you ever seen such a thing? Any thoughts on where there could be a conflict would be appreciated.

• This reply was modified 2 years, 10 months ago by sm2dev.

Hi @kelg7,

Can you post a link? Not something I’ve seen before so could well be a css collision with something else.

Thanks
Phil

Hey @philsbury,

Thanks for the quick reply. I have moved the site to staging to troubleshoot: https://ddcstaging.wpengine.com/

I haven’t found a solution but perhaps this will be a starting point for you…

After going through my files it looks like it may be a conflict with some classes in the menu navigation. Though I’m unsure of why it is impacting only certain pages since the menu is global.

For mobile the class .nav is set to position:absolute, which could be the conflict because when I comment that out, the age gate appears. Obviously that is how the site menu operates so I cannot comment out the code and would need a workaround for age gate.

Additionally I found if I comment out the below code (while the above mentioned .nav postion:absolute is still active) in the the theme js file, the age gate appears but I can’t figure out what the conflict actually is.

$('.parent-link').wrap('<div class="menu-level1"></div>');
$('.parent-link').after('<svg data-src="/wp-content/themes/ddc/assets/img/arrow-nav-down.svg" width="10" height="10" data-loading="lazy" aria-hidden="true"></svg>');

Hi @kelg7,

Done some digging and I’m at a bit of a loss too here. It looks like the .age-gate-wrapper has no width or height.

If I change a class from fixed position to absolute it shows, but changing back doesn’t make it disappear.

Can you try adding the following css:

body.age-restriction, html.age-gate-restricted {
  position: absolute;
}

Not convinced it’ll work but worth a shot!

Thanks
Phil

@philsbury As you suspected that did not work, unfortunately. I find it very odd that the form appears when switching between portrait and landscape orientation. And that this seemingly happens only on certain pages.

Any other ideas to try?

Hi @kelg7,

Yeah I’ve not found a root for this.

Other pages seem ok, just on the home page age gate has no width or height when it loads no matter the orientation – ie it doesn’t load in landscape or portrait but changing it makes it kick in.

Before digging any deeper, try that css from about and set it to relative:

body.age-restriction, html.age-gate-restricted {
  position: relative;
}

Again, not convinced but this is a really strange one.

Thanks
Phil

Hi again @kelg7,

Can you try clearing WPRocket? I just took the html from your staging site and ran it locally and it’s all good, plus it renders a bit different with triangles over the edges of age gate which I don’t see on the staging site

Thanks
Phil

@philsbury I did try the code you sent and the form does show on mobile. Thank you!

However, now the user has to click the button twice before the age gate will go away. I took all our custom styling off and it still requires a double click. Our client would like it to be a single click. Any thoughts on that?

(P.S. Sorry for the delay, I put the code in place and cleared the cache when I got your response. I have had a message up to send you but I a few calls came in.)

Hi @kelg7,

Great there’s progress! No problem on the delay, I get how it is ??

We don’t add any hover styles so they must come from the theme somewhere.

However, a bit of Javascript can probably help here (I’ve seen some css solutions using pointer detection too so they could be worth a try).

Anyway, this should achieve what you need:

window.addEventListener('agegateshown', function(){
    document.querySelector('.age-gate-submit-yes').addEventListener('touchstart', function () { 
        this.click()
    });
});

I gave it a quick test in console and seems to work.

Cheers
Phil

Good morning, @philsbury

Unfortunately when I added the code snippet you suggested it did not work. My co-worker and I have spent the morning trying to figure it out but no luck yet. We’re still digging.