XF 1.4 showing banner ad on desktop and mobile

[gavpeds]

Hi all i am sure this is achievable some how but i just am not sure how or what coding i will need to use.

Basically i am showing a image banner ad in the header of my site, as this is an image it does not resize for mobile so instead i wonder if it is possible to show the larger banner for desktop and a smaller version for mobile.

How can i achieve this?

 

[Paul B]

By using a media query.

The link in my signature explains how.

 

[gavpeds]

Ok so i am using rotating ads plugin to show the banner. I have done the below but have an issue that both version show on desktop.

In Extra.css i have this

@media (max-width: 483px) {
  .banner-1 {
    display: none;
  }
  .banner-2 {
    display: block;
  }
}

In the area where i can put html for the banner in rotating ads plugin i have this.

<div style="text-align: center;">
<div class="banner-1"><img src="/myimages/sponsors/whizzbizz728.png" /></div>
<div class="banner-2"><img src="/myimages/sponsors/whizzbizz.png" /></div>
</div>

On mobile i now get the smaller banner but on desktop i get both versions.

 

[Paul B]

That's probably because you don't have any code to hide banner 2 at any width.

 

[gavpeds]

What code would i need to hide banner 2?

 

[Paul B]

The same way you hide the other one - display: none.

 

[gavpeds]

I changed the display: block; to display: none; for banner 2 but that just removes the mobile banner on mobiles.

 

[Paul B]

It would.

Use display:none in the regular CSS, display: block in the media query.

 

[gavpeds]

You mean like this?

.banner-1 { display: none; }

@media (max-width: 483px) {
.banner-2 { display: block; }
}

With this i still get mobile version on mobile but bother versions on desktop.

 

[gavpeds]

Ok so someone just suggested i just use this
img {
max-width: 100%;
height: auto;
}

Can i safely use this? It works but presume this would effect all <img src= on the site?

 

[gavpeds]

So i think i now have a solution that works for me and maybe this might be useful for others.
This now makes my 728 banner shrink to fit mobile or other views without breaking out of the responsive styling of the forum.

Css

.headerbannerad img {
    max-width: 100%;
    height: auto;
}

html

<div style="text-align: center;">
<div class="headerbannerad"><img src="imageurlhere" /></div>
</div>

 

[cclaerhout]

Hi all i am sure this is achievable some how but i just am not sure how or what coding i will need to use.

Basically i am showing a image banner ad in the header of my site, as this is an image it does not resize for mobile so instead i wonder if it is possible to show the larger banner for desktop and a smaller version for mobile.

How can i achieve this?

If you want to avoid to use the css media queries and avoid the source of the other picture to be in the dom twice, you can take a look at this addon.