Child element not properly styled for responsive site

[Slofe]

Hi there,

I’ve been having problems with a cookie consent form from my ad network loading the box too wide on my mobile site. They have written back and told me the following:

This overflow: visible !important is causing a child element to be able to overflow the parent container’s width.
The publisher should analyze why that’s there and if they need to make any other considerations to make sure their content is all responsive.
In this case at least one child element on the page is not properly styled for a responsive site so the media query fails for the popup’s CSS:

Note: if the publisher just sets this to overflow: hidden it fixes the consent form issue, but they really should figure out which element is the root cause and properly style it, as this may cause content to be cut off.

I don’t know where to look to change any of this so thought it would just be easier to ask here. What do I need to do to fix this problem? According to the ad network it only happens in EU/EEA countries and not in the US.

Thanks

[marc_a]

Hi David,

Thanks for reaching out.

To better understand your issue, can you please provide us a link to your website so that we can check it and able to provide you an answer to your question. Providing a screenshot is a great help to determine the issue.

Hope that helps.

Thank you.

[Slofe]

Thanks, the address is

Summary

www.chameleonschool.com

The problem exists on mobile site only. Screenshot attached, thank you.

Summary

[prakash_s]

Hello David,

Thanks for sharing the page URL, I went ahead and checked your site it seems that it is working fine at my end. Please have a look at the given screenshot below.

Thanks

[Slofe]

Please see the linked video for the problem I’m having on mobile.

Summary

https://www.youtube.com/watch?v=kEJuX61s0a4

[ruenel]

Hello David,

Your video is private. It can only be viewed by you. You must set the video as unlisted so that we can see it and at the same time, it will not display in your channel.

In the meantime, kindly deactivate your Autoptimize plugin and test your site again.

Thanks.

[Slofe]

I deactivated that plugin and it changed nothing even after I cleared cookies etc so I’m going to reactivate it again. You should now be able to see the video I linked to, thanks.

[tristup]

Hi David,

Like my other colleagues, I am also not able to replicate the issue you described. I would suggest you deactivate the Autoptimize plugin after deleting the cache and check it again.

Hope it helps.
Thanks

[Slofe]

Hello,

I’ve tried these and nothing’s working. As I said in the opening message it’s only happening in EU/EEA countries and not the US so that’s probably why you can’t replicate it butyou can see what’s happening in the video I linked to. There’s also the point about overflow that wasn’t addressed. Presumably this is important but I don’t know what I need to change. Can you help with that please? Thanks.

[tristup]

Hi David,

I have used the proxy to check the site for the EU countries but didn’t get the issue you specified in your post. I suggest you consult with a local developer who can inspect and investigate the issue specifically at your machine.

Thanks

[Slofe]

Hello,

This is a bit frustrating because I haven’t done anything to my site to change it at a theme level and yet suddenly I’m hit with an error which you can clearly see and I’ve written about in the first post but because you can’t reproduce it you seem unable to help. The error is there you can see it in the video I sent.
I’ve also just checked my google account and I’ve seen my mobile pages have errors. Again, I haven’t touched my site other than to update posts. I don’t do development coding, that’s why I bought a theme with support so can you support me please?

This is a screenshot of the errors shown on google search console

[Slofe]

In the mean time I’ve been in contact with my ad broker and they sent back the following:

We’ve found ourselves back at the issue of styling on the site, and specifically on mobile a width being set that is not ‘responsive’ to screen size and therefore causing the left/right scroll.

The issue appears to be isolated to the mobile site in particular, where you’re able to scroll right quite a ways over.
If you ‘right click + inspect’ in Google Chrome browser, it will open the Developer tools where you can see the CSS being loaded onto the site.
We’re seeing references to ‘add width’ or ‘screen size’ then that’s going to be the culprit of the errors.

I don’t need you to recreate the error your end just to know that it’s an error that’s occurring. I also need you to tell me how to get to the mobile CSS on my site so I can look at these ‘add width’ and ‘screen size’ sections and I need to know what to change, please.

Thank You.

[Slofe]

My ad broker also sent the attached image which appears to show the code causing the problem. It’s underlined in the pic.

[ruenel]

Hello David,

The errors most came from the minified or combined CSS generated by the Autoptimize plugin. Can you please temporarily deactivate the plugin and do another round of tests? To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[christian]

Hey David,

The overflow: visible !important code is not coming from our theme. It’s being added by something on your site previously. I say previously because when logged in, the issue doesn’t happen.

Please clear all caches including Autoptimize’s cache, W3TC Total Cache and contact your web host to clear all server caches.

If the issue couldn’t be resolved on your end, please contact your web host to help you fix the issue.

Also, before reporting an issue to us, please do all applicable troubleshooting steps listed here https://theme.co/docs/common-issues. That will tell us if the issue is really with our theme and not by 3rd party factors that are usually causing issues in a WordPress site.

Thanks.