XF 2.2 logo image jumping to a tiny size with narrowing page width

V

vintage

Member
My logo is a wide image (3360px wide 256px high).
As I decrease the width of my browser window, the image scales down nicely, to a point... then the image jumps down to a tiny thing, that stays a fixed tiny size. Like minuscule and unreadable. This jump seems to happen when the browser window width goes below approximately 640px.
The logo also appears tiny on my phone.

Is there a setting to stop this?

The only setting I have found that seems related are the "Medium" and "Narrow" responsive break points", which were at 650px and 480px. If I change both of those to 0px (zero), my problem seems fixed! But I don't know anything about the responsive stuff. Am I messing something else up besides the logo if I do this? Or is there another way to solve the problem?

Site:
hqvadventure.com

HQVadventure - The Husqvarna Motorcycle Forum

The Premier Forum for Husqvarna Motorcycles and Riders
hqvadventure.com hqvadventure.com
This is with the responsive break points set as default. You can see the problem if you make the window narrow.

Thank you!
C
 
Last edited:
Sort by date Sort by votes
I reverted my page to the stock default settings so you can see the problem. My fix in the top post ( setting the break points to zero) didn't work well as it made the page look really bad on my phone.
Any ideas? I really dislike the minuscule logo on narrow windows and the cell phone screen!
 
Upvote 0 Downvote
The huge image is not really a logo, It is more like a header background. I think it would be best to add that as background image in style properties > header and navigation (but without the HQVadventure logo on it, just the background

then add the HQVadventure logo part only into the logo settings.

That way the huge wide header image will disappear on mobile, and only the actual HQVadventure logo will show

EDIT:

this may also solve your horizontal scroll issue and I believe you can make a header background image responsive with background-size: contain; but may do odd things so you'd need to the right color for the background
 
Last edited:
Upvote 0 Downvote
Mr Lucky said:
The huge image is not really a logo, It is more like a header background. I think it would be best to add that as background image in style properties > header and navigation (but without the HQVadventure logo on it, just the background

then add the HQVadventure logo part only into the logo settings.
Click to expand...
Won't then the "logo part only" have the same problem?
Is there a way to set the minimum size the logo shrinks to?
I don't understand why this isn't a problem for the default xenforo .png ?
 
Last edited:
Upvote 0 Downvote
vintage said:
Won't then the "logo part only" have the same problem?
Is there a way to set the minimum size the logo shrinks to?
I don't understand why this isn't a problem for the default xenforo .png ?
Click to expand...
No it should look fine, because instead of reducing a huge image to a small space, it will only be reducing a much smaller image by a small amount. The background will stay as it is.

vintage said:
I don't understand why this isn't a problem for the default xenforo .png ?
Click to expand...

Because that is a logo not the whole header background, as I'm suggesting you do. (NB: On xenforo there is just that small logo and no header background image)

Currently you are thinking of the whole wide image as the logo. You need to think of this as two separate things, the big 3360px wide header background, and a separate logo image that is just the word HQVadventure which can be png or SVG.

This is a site with both a logo and background image:

Logic Users Group

The oldest and best Apple Logic software discussion group. Ask the experts.
logic-users-group.com logic-users-group.com
It's not a great logo but you can see how it works.

Try reducing the browser width. Note how the header stays in place, then disappears when you get to the repsonsive break point and the logo jumps down and resizes nicely to fit into the mobile imageless header
 
Last edited:
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom