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

XF 1.2 Different logo based upon responsive

Tracy Perry

Well-known member
#1
OK, I'll admit it... I'm having a brain infarction now. At one time I had it set so that I could server a smaller version of my logo to phones compared to tablets and desktops using responsive queries. Now, for the life of me I can't remember what I did.
Somebody throw me a lifesaver! (and no, not one of the candy ones) ;)
 

Chris D

XenForo developer
Staff member
#2
Hmm, if you achieved this before, what was the desired result? Just to serve an image with smaller dimensions? Or to save bandwidth/download times?
 

Tracy Perry

Well-known member
#3
Hmm, if you achieved this before, what was the desired result? Just to serve an image with smaller dimensions? Or to save bandwidth/download times?
Serve a smaller image. Have problems with the current image not scaling correctly for the phones (works fine on tablets and larger) but the iPhone (specifically in this case) logo overlays the search magnifier glass. In reality, I really need to move the search bar over further to the right in narrow width responsive output after noticing that the box for the search is offset off the screen to the left.
 

Tracy Perry

Well-known member
#6
For future reference, this resource explains how to use media queries to adapt the CSS based on the browser width: http://xenforo.com/community/resources/responsive-design.2193/
Was already using that as well as another post that I had bookmarked. The problem is that it never took effect (probably using the wrong CSS for the style I am using) and then it is probably going to be more related to trying to move the Search Bar (#QuickSearch) - which, again is directly related to the style and using a graphic logo.

Tried both the
Code:
<xen:if is="{xen:property enableResponsive}">
@media (max-width:480px)
CSS Code Here
</xen:if>
and

Code:
<xen:if is="{xen:property enableResponsive}">
@media (max-width:{xen:property maxResponsiveNarrowWidth})
CSS Code here
</xen:if>