XF 1.2 Different logo based upon responsive

[TPerry]

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]

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?

 

[TPerry]

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.

 

[TPerry]

@Chris Deeming - turns out it's a quirk with Quark (Antiquark to be exact). Got a ticket in with @Audentio awaiting feedback. If you enable the quark specific "Mode" the problem shows up. Disable it and it doesn't.

 

[Paul B]

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/

 

[TPerry]

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

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

and

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