[Support request] How to disable an element from showing on Mobile

[Jude]

I inserted this ad https://prnt.sc/pqhkwq through an element.
However, it does not display in full on mobile. Some part is cut off when viewed on a mobile device.

I think I have two options.

1. make the ad responsive.

2. make the ad to show only on computer and tablet but not on mobile phones. Then create another ad with dimension fit for mobile device and disable it from showing on computer and tablet devices.

How do I do any of this? Thank you.

(I use a plugin for this but the plugin seems not to work on the element but only on widgets.)

[David]

Hi there,

1. Ads are embedded using an iFrame all of its code comes from the Adserver so there is no way to change that from with your site. You would need to see whether they provide a more responsive option.

2. You can use this CSS to hide the Advert on smaller devices:

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

Alternatively you may want to look at placing the advert in the previous hook you were using then it won’t clash with the sidebar.

[Jude]

Its the same hook I was using before that I am still using. all I did was to adjust the width and height in the ad code.

I have entered the CSS thank you.

I have also created another ad and hook. https://prnt.sc/pqtbs4
please give me a CSS to hide it on large device but make it available in small device.

[Leo]

So David’s code would hide the ad on mobile, this would hide the ad on desktop:

@media (min-width: 769px) {
    .anbc-single {
        display: none;
    }
}

You can find more info here:
https://docs.generatepress.com/article/responsive-display/

[Jude]

I need one ad hidden and the other not hidden.

David’s code will hide the two ads on mobile while your code will hide it on desktop.

I need one ad hidden on desktop but visible on mobile while the other ad visible on desktop but hidden on mobile.

How do I achieve this?

[Leo]

You will need to give the ad specific classes so we can target them individually.

Or you can use the built-in hide on classes suggested here:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Jude]

I don’t understand what you mean by class or built it.

however, each ad has its own shortcode. will that work?

[Leo]

You can try this:

<div class="hide-on-desktop hide-on-tablet">
    [shortcode for mobile ad]
</div>
<div class="hide-on-mobile">
    [shortcode for desktop ad]
</div>

[Author]

Posts