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

XF 1.3 Logo display in mobile browsers

Discussion in 'Styling and Customization Questions' started by JackieChun, Jun 6, 2014.

  1. JackieChun

    JackieChun Active Member

    The logo of my forum is too wide for mobile browsers, so it gets resized in mobile view, which looks way zoomed out and is unsightly.

    Instead of resizing and zooming out, I would like only the left part of the logo to be shown in mobile view, say the leftmost 200 pixels.

    What's the best way to do that?
     
  2. Mr Lucky

    Mr Lucky Well-Known Member

    I'm not sure that would be possible.

    What I do is have a completely different logo for mobiles.

    In extra.css

    This loses the logo:
    Code:
    /* removes logo and  header space when responsive*/
    
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveNarrowWidth) {
            #logo {
            display: none;
            }
    
            #headerMover #headerProxy {
            height: {xen:calc '@headerTabHeight * 2 + 2'}px; /* +2 borders */
            }
        }
    </xen:if>
    Then I use the following to display a smaller logo for mobiles (below the navigation)

    Code:
    /* sall logo for mobiles*/
    
    .mobilelogo
    {display:none}
    
    @media only screen and (max-device-width:480px)
    {.mobilelogo
    {display:initial;max-width:100%;height:auto;}
    }
    Then I link to this image ad above breadcrumbs

    Code:
    <div class="mobilelogo"><img class="mobilelogo" src="xxxxxxxx/small-logo.png" alt="xxxxx" /></div>


    (I could have just replaced the logo in the header but I wanted it below the navigation)
     
  3. JackieChun

    JackieChun Active Member

    That seems to be a lot of code just to swap one image for another. Isn't there a shorter way?
     
  4. JackieChun

    JackieChun Active Member

    How about a div with fixed dimensions, aligned to left, and no overflow? The logo will have no choice but to be cropped.
     
  5. Russ

    Russ Well-Known Member

    You could utilize the span inside the logoBlock using CSS only. Have your normal logo just like you have it, create one for mobile:

    Put that into extra.css
    Code:
    @media (max-width:@maxResponsiveWideWidth)
    {
       #logo img { display: none; }
       #logo span { display: block; width: 120px; height: 50px; background: url(styles/default/xenforo/mobilelogo.png) no-repeat 0px 7px;  }
    }
    
    May need to adjust of course depending on your header size.
     
  6. Mr Lucky

    Mr Lucky Well-Known Member


    Yes:
    Add this to EXTRA.css

    Code:
    /* to hide main logo on mobiles*/
    @media only screen and (max-device-width:480px)
    {#logo
    {display:none !important;}
    }
    
    /* to hide mobile logo on larger than 480px*/
    .mobilelogo
    {display:none}
    
    /* to show mobile logo on smaller than 480px*/
    
    @media only screen and (max-device-width:480px)
    {.mobilelogo
    {display:initial;}
    }
    and add this to logo_block

    Code:
                <div class="mobilelogo">
                <img class="mobilelogo" src="path to mobile logo image" />
                </div>
        
     
    AndyB likes this.
  7. Mr Lucky

    Mr Lucky Well-Known Member

    I think to do what you are asking in the OP may be very very simple

    In header.css remove the bit of code that makes the logo responsive, and it just says the same size. I'm not quite sure about just showing 200px, but this certainly seems to stop it getting smaller.

    Just remove or comment out this:

    Code:
    height: @headerLogoHeight;
            max-width: 100%;
     
  8. JackieChun

    JackieChun Active Member

    This method did not work, because it's interfering with the responsiveness of the whole page. Because the logo is wider than the mobile width, it's sticking out to the right.

    I guess I'll have to go with creating a separate mobile logo.
     
  9. JackieChun

    JackieChun Active Member

    @Russ I just tried your method too. The dimensions of the mobile logo are 379x85. That makes it too wide for iphone 5 but too small for Nexus 7 in vertical view (although too squeezed to the left).

    Is it possible to have this logo resized when in iPhone resolutions and centered when in other responsive views that have more width?
     
  10. Mr Lucky

    Mr Lucky Well-Known Member

    I have done that and it works like a charm. Touch wood.
     
  11. JackieChun

    JackieChun Active Member

    @Mermaid it probably worked for you because your logo is not as wide as mine. If the logo is wider than mobile width, that breaks responsiveness.
     
  12. Tracy Perry

    Tracy Perry Well-Known Member

    Really? Seems to work here (just noticed iPad mini is off a little and about to edit it so it won't be) and all of them are the same 14400 x 400 image.

    Desktop.
    Screen Shot 2014-06-16 at 11.05.35 AM.png

    iPad.
    image.jpg

    iPhone
    image.jpg
     
    Last edited: Jun 16, 2014
  13. JackieChun

    JackieChun Active Member

    @Tracy Perry it seems that you are using a logo that matches iPhone's width perfectly, which then stretches in iPad and desktop modes. My original logo was too wide for iPhone to begin with, but I don't want it squeezed in, hence the dilemma.
     
  14. Mr Lucky

    Mr Lucky Well-Known Member

    I think design wise it's easier to just make a smaller logo for mobiles, than have a non responsive large log that only the left hand half shows on mobiles.

    Well, at least it's working great for me
     
  15. JackieChun

    JackieChun Active Member

    @Mermaid I agree, but right now my mobile logo is still too big for the iPhone, so I'm trying to figure out how to squeeze it into the iPhone screen.

    Here's the link.
     
    Last edited: Jun 17, 2014
  16. Tracy Perry

    Tracy Perry Well-Known Member

    What is there is not actually a logo but a banner that stretches across and uses media queries to control the size of. Logo is hidden.

    That's not my site - just one of a guy I offered to help some with. It's not perfect yet, but it's close enough till he gets more comfortable working with XF. My sites (and servers) keep me busy enough that I don't have a lot of time to delve into styling other peoples sites fully.
     
  17. Mr Lucky

    Mr Lucky Well-Known Member

    I would split that into two logos . One wide o

    I would just make the left part of the current logo into your actual logo, and the stuff to the right (the pixies) could be part of the background, no need to part of the clickable logo.

    This is what I did:

    http://cafesaxophone.com/community/

    The cup and beans are a header background, only the bit on the left is the actual logo (ignore the "taming" logo on the right, that is just in the ad_header which actually disappears on the mobile)

    I use Firefox Web Developer tools responsive view to check this stuff, it's very useful
     
    Last edited: Jun 16, 2014
    EQnoble likes this.
  18. JackieChun

    JackieChun Active Member

    That wouldn't work for this design unfortunately. The characters have to stay at a fixed distance from the logo. If I separate them, that will have consequences at untested resolutions. That's the reason the logo and the background are separate.
     

Share This Page