Hide an Advertisement Block on Mobile?

[Ecnad]

is there any way to hide an advertisement placement when a user is visiting on a mobile device? I have an ad block with two banners in it, so the "smaller version" option won't work, but the banners are too wide for mobile users and are breaking the mobile layout

[opentype]

 

[newbie LAC]

Hello,

Each image advert has the wrapper with css class ipsAdvertisement

Also each image has own css class ipsAdvertisement_large, ipsAdvertisement_medium, ipsAdvertisement_small

You can hide small version adding into custom.css 

.ipsAdvertisement .ipsAdvertisement_small {
	display: none;
}

 

[Thomas P]

Hi,

sounds good, but wouldn't that hide the advert from all devices?

Thanks,
Thomas

[newbie LAC]

49 minutes ago, Thomas P said:

sounds good, but wouldn't that hide the advert from all devices?

ipsAdvertisement_large uses for PC

ipsAdvertisement_medium uses for Tablet

ipsAdvertisement_small uses for Phone

[Thomas P]

Stil confused: When I want to hide an Advertisement (ipsAdvertisement_large) only on mobiles and tablets - how would the a.m. CSS help?

[Kjell Iver Johansen]

10 minutes ago, newbie LAC said:

ipsAdvertisement_large uses for Tablet

 

Isn't that ipsAdvertisement_medium

[newbie LAC]

3 minutes ago, Kjell Iver Johansen said:

Isn't that ipsAdvertisement_medium

Yes. It's all copy-paste 

6 minutes ago, Thomas P said:

Stil confused: When I want to hide an Advertisement (ipsAdvertisement_large) only on mobiles and tablets - how would the a.m. CSS help?

The advert with class ipsAdvertisement_large displayed only on PC

[newbie LAC]

Let's me explain how advert images displays.

We have a block with 3 images:

- Large image displayed on PC

- Medium image displayed on Tablet. If you have not uploaded a medium image, a large image will be displayed.

- Small image displayed on Phone. If you have not uploaded a small image, a medium will be displayed. If you have not uploaded a medium image, a large image will be displayed.

So if you uploaded large image only you will see it on all devices.

If you need hide an image on tablet and phone add 

.ipsAdvertisement .ipsAdvertisement_small, .ipsAdvertisement .ipsAdvertisement_medium {
	display: none;
}

 

[Thomas P]

Got you, awesome - thanks for the explanation and the code