XF 1.4 Removing banner image from responsive designs.

[Stemmy]

Sorry for asking a question that has been covered before but i have read what i can and still cannot work out how to do this.

Ive added an image to the desktop version of my forum but on the responsive versions obviously the static image does not reduce so breaks out of the template.

I have found the custom CSS sections for each responsive template and i did see some people suggest code to go in there and yet others said not to.

It all got very confusing so i thought i would ask for a definitive answer.

Please can you tell me in very very basic language what i need to put where to stop the images showing ion the responsive designs.

Thanks in advance.

By the way my forum is at www.photography-forum.org

 

[Stemmy]

nobody ???

 

[Paul B]

Use a media query and display none.

https://xenforo.com/community/resources/responsive-design.2193/

 

[51463]

I've looked everywhere for the answer but no one seems to know how.

I've searched every thread and everyone seems to have the same problem. They don't know how to put an ad to the right of the logo.

The ad-header is really a pain and no one can get it. Or maybe i'm not skilled enough with css.

But it always pushed my ad down and overlapped. And i havent seen to many forums out there with an ad on the right of the logo(A Big Logo).

But tonight i figured it out! All i had to do is add this:


<xen:if is="@enableResponsive">
@media (max-width:1050px) {
.myforumad {
display:none;
text-align: center;
}
}
</xen:if>


You would probably have to add a div class around your ad: <div class="stemmy">Ad Code Here</div>

Then your code in EXTRA.css would be:
<xen:if is="@enableResponsive">
@media (max-width:1050px) {
.stemmy {
display:none;
text-align: center;
}
}
</xen:if>


Except change the 1050px to whichever size you want your ad to disappear





Now there is an add to the right of the logo and it disapperars when it's in mobile. 1 year i've been fighting with that stupid ad. Whoo hoo! I'm getting better at css. Now i just have to fix the gap under my header..

Good luck.

 

[Stemmy]

Use a media query and display none.

https://xenforo.com/community/resources/responsive-design.2193/

Sorry for sounding mega thick Brogan but what is a "media query" ??

 

[Paul B]

This: @media (max-width:800px)

Read that resource, it is all explained there.