• 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

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

Well-known member
#2
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)
 

Russ

Well-known member
#5
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.
 

Mr Lucky

Well-known member
#6
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

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>
 

Mr Lucky

Well-known member
#7
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
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%;
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
@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

Well-known member
#10
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.
 

Tracy Perry

Well-known member
#12
@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.
Screen Shot 2014-06-16 at 11.05.35 AM.png

iPad.
image.jpg

iPhone
image.jpg
 
Last edited:
#13
@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

Well-known member
#14
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
 

Tracy Perry

Well-known member
#16
@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

Well-known member
#17
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
 
Last edited:
#18
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.