1. 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

Discussion in 'Styling and Customization Questions' started by Tracy Perry, Dec 17, 2013.

  1. Tracy Perry

    Tracy Perry Well-Known Member

    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) ;)
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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?
     
  3. Tracy Perry

    Tracy Perry Well-Known Member

    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.
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    @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.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

  6. Tracy Perry

    Tracy Perry Well-Known Member

    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>
     

Share This Page