you can make a media query
@media (max-width: 800px) {
.logo {
width: xxx px or %;
}
}
\
as i can see all should work fine
Your menu items are also displaying incorrectly in Firefox at narrow screen widths, i.e., they shouldn’t be displaying at all until the menu button is clicked. Not sure what the problem is quite yet.
I just tried this website on my desktop in Firefox, but all looks fine with the logo being responsive. When you say firefox, are you viewing in in a mobile version of Firefox? also, is it possible to create a screenshot of what you are seeing?
Thanks for the help. I just changed the header to the horizontal format that was causing the responsive issues in Firefox. We had changed to the square image to solve the problem, but much prefer the horizontal as it looks better when the background image pops to the top of the screen vs being a sidebar.
On a related note, is there any way to make the sidebar background narrower when it appears as the header? When the site is presenting vertically, it takes up an enormous amount of the screen before the first post shows.
I’ve got screenshots, but don’t know how to include them in this post. The link should show you the problem now. If the browser window is narrowed enough, it’s OK, but once it’s widened to a certain point, it goes wonky.
I just noticed you changed to the wide logo…now I see it. So here is the thing….Firefox has been causing responsive problems for images that are in containers and many have complained to Firefox but they don’t seem to be in a rush to fix this. In fact, this has been a problem for a couple of years already where Firefox is the “only” browser that has this problem.
However, this does not help you, so I will try another way of forcing responsiveness to it after I submit this reply.
I had this solved before by changing width: 100% to max-width: 100%, but since the latest update to Firefox, it seems that no longer works. I remember the days when everything worked in Firefox, but this is no longer the case.
OK….this is really a wacky solution because it kind of reverses what originally was done, but can only apply to images in div containers such as the logo, but add this:
.header-image img {
width: 100%;
}
…to your theme’s style.css file around line 194, just after this:
.header-image {
overflow: hidden;
}
It’s OK to edit the style.css for the theme because if this works for you as it does for me on my test site, this will be in the next theme update.
That worked! Thanks.
Is there any way to make the sidebar background narrower when it appears as the header? When the site is presenting vertically, it takes up an enormous amount of the screen before the first post shows.
You’re very welcome, and good to hear the image code adjustment worked. I will apply that to the next update then.
Regarding the header spacing, I’m assuming you are referring to the top and bottom spacing of the header area? If so, you can do some custom CSS, something like this:
.site-header {
margin-bottom: 0;
padding: 0;
}
Don’t do that in the theme’s style.css file though, in this case for any custom CSS, use a plugin like Simple Custom CSS. This will allow you to get theme updates without losing any custom css you create.
Is it safe to set this topic as resolved?
Thanks so much for the help. We’ll play around with this code you sent and see what we can do.
Great theme, by the way, and we appreciate the promptness of your assistance. The topic is resolved.
You’re very welcome, and thank you for the comment about Seasonal 🙂
