• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 showing banner ad on desktop and mobile

gavpeds

Active member
#1
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?
 

gavpeds

Active member
#3
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
Code:
@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.
Code:
<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.
 

gavpeds

Active member
#9
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

Active member
#10
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

Active member
#11
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
Code:
.headerbannerad img {
    max-width: 100%;
    height: auto;
}
html
Code:
<div style="text-align: center;">
<div class="headerbannerad"><img src="imageurlhere" /></div>
</div>
 

cclaerhout

Well-known member
#12
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.