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

Home Forums Support How to disable an element from showing on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1049373
    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.)

    #1049574
    David
    Staff
    Customer Support

    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.

    #1049973
    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.

    #1049977
    Leo
    Staff
    Customer Support

    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/

    #1049988
    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?

    #1049992
    Leo
    Staff
    Customer Support

    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

    #1050015
    Jude

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

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

    #1050017
    Leo
    Staff
    Customer Support

    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>
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.