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

[vintage]

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 - The Husqvarna Motorcycle Forum

The Premier Forum for Husqvarna Motorcycles and Riders

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

 

[vintage]

site added to top post.

 

[vintage]

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!

 

[Mr Lucky]

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

 

[vintage]

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.

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 ?

 

[Mr Lucky]

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 ?

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.

I don't understand why this isn't a problem for the default xenforo .png ?

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

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

 

[Mr Lucky]

Also you can reduce the file size if the background is a jpeg not a png. The logo must be png or svg because it needs a transparent background.

 

[vintage]

Ah! This makes sense to me now, Thank you Mr Lucky, I'll try that!

 

[vintage]

Thanks again, it worked! All fixed. ;-)