XF 1.3 Logo display in mobile browsers

[JackieChun]

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?

 

[Mr Lucky]

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:

/* 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)

/* 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

<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)

 

[JackieChun]

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

 

[JackieChun]

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

 

[Russ]

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

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

 

[Mr Lucky]

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

Yes:
Add this to EXTRA.css

/* 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

            <div class="mobilelogo">
            <img class="mobilelogo" src="path to mobile logo image" />
            </div>

 

[Mr Lucky]

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:

height: @headerLogoHeight;
        max-width: 100%;

 

[JackieChun]

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:

height: @headerLogoHeight;
        max-width: 100%;

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.

 

[JackieChun]

@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?

 

[Mr Lucky]

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.

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

 

[JackieChun]

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

 

[TPerry]

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

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.


iPad.


iPhone

 

[JackieChun]

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

 

[Mr Lucky]

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

 

[JackieChun]

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

 

[TPerry]

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

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.

 

[Mr Lucky]

I would split that into two logos . One wide o

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

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

 

[JackieChun]

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.