Video unit is not loading in mobile version

Hi there,

Looks like that's the inline style coming from the plugin itself.

Can you follow up with them on how to change that? It shouldn't be related to the theme.

Hi Leo,

I'm not using any plugin to display that Ad. I have added just a code in the header section. Earlier, I contacted them to disable the video ad on my homepage. Even for that, they said it's not possible for them to do that. So I have added CSS code in my child theme to disable the video unit on my homepage and it worked well.

Can I add this code as they suggested in the screenshot which I have attached in my earlier message?

.code-block{
display: none;
}

Yup you sure can!

It can be added using one of these methods:
Adding CSS: https://docs.generatepress.com/article/adding-css/

Hi Leo,

Can I simply add the following code in my child theme style.css or do I need to add any media query for a mobile version?

Please let me know the correct code for mobile version with a media query.

.code-block{
display: none;
}

Hi there,

this CSS for mobile only:

@media (max-width: 768px) {
    .code-block {
        display: none;
    }
}

You may find this useful:
https://docs.generatepress.com/article/responsive-display/

Hi David,

I have added the above code in my child theme CSS but didn't see the video unit.

I got a response from the Ad Network as "The reason the unit is not loading on mobile is that on the main page (homepage), the player is placed inside a hidden div which prevents the unit from loading completely on mobile."

Could you please help me in fixing this.

Thanks in advance.

I am confused.
You wanted to hide ( display: none; ) the .code-block element for mobile which is what the CSS we provided does.

Can you explain what the issue is you're trying to fix ?

Hi David,

Actually, there is a Video Ad Unit on my site. Which loads right-hand side bottom. I would like to fix the following.

1. Video Ad is not loading on mobile devices.
2. How to hide this video ad on just the homepage.

Thanks,
Rajkumar

1. Where is the hidden div, and what's hiding it? Can you show us a screenshot? The one you've shared isn't showing anything that would hide it.

2. You can target the div on the home page like this:

.home .your-div-class {
    display: none;
}

Hi Tom,

Here is the response from the Ad network.

Regarding the mobile IVT Hidden - below see tech solution for it:
"Our tag is integrated by hardcoding in the next manner:

<div class="code-block code-block-2 ai-viewport-1" style="margin: 8px auto; text-align: center; display: block; clear: both; max-width: 650px;">

There is a class named " ai-viewport-1 " that hides this element on narrow screens with max width 767px.
By removing this class from the element, the IVT hidden will be resolved, but... here is the main trouble!

The template used for this placement is not suitable for mobile screens. Please see the attached screenshot."

One way to solve it is to try to make the template responsive.
Another way is to define another placement for mobile with an appropriately sized or responsive template.

Could you integrate our tag "as is," and not via the "EZ-screx" system?

Could you please help me in adding an appropriate code on my site.

Thanks in advance.

Hi there,

The images aren't loading for me - can you check?

GeneratePress itself is responsive by default - you shouldn't need to do anything special regarding the theme to get the ads to display.

Hi Tom,

Thanks for your prompt response.

Here are the links to the above images

Thanks,
Rajkumar

The images still aren't loading, even when I open the URLs in a new tab.

Are we sure it's a theme-related issue? If there anything specific the ad network is seeing that needs to be tweaked on the theme side of things?

Hi Tom,

I am sorry. Hope this time you can access these images.

Thanks,
Rajkumar