Header Image Distorting in mobile/small screens

I’m having the same issue. Right around the 580 px area it begins refusing to adjust the image.
I’m making SOME headway with:

@media screen and (max-width: 580px) {
.site-branding {
   min-height: 100%;
}
}
@media screen and (max-width:580px) {
.header-widget-area > img {
    min-height: 100%;
}}

which seems to help, but I’m still tinkering.

Nods, it does seem to work – at least on my own mobile it’s not squishing things out of proportion (need to test it on more then mine – like the iPhone which has a MUCH smaller screen space).

I assume that the code you are playing around with in line 1756 of the CSS code? That’s where I put the code you posted and it seems to work in its fashion on my phone at least.

Thanks for your help, its greatly appreciated, if you have further insight it would be welcomed (or if I figure something out i’ll post it here as well).

Thanks!

I used a custom css script to hold the style for my child theme. I tested it all the way down to iphone and it performed well. The only issue I’m having with it is the navbar seems unwilling to take instructions. (Must be a teenager;) It wants to grow while everything else is downsizing. I can change colors, but can’t seen to neutralize it.

Glad it helped you.

Oh nice, I just have DW that I started building sites in on so many years ago (and still do on the odd occasion) so its what I look at code with when trying to customize it or when needing to try and debug it or like in this case trying to find the area that’s causing issues.

As to your nag bar, that is one that I’ve not yet noticed a issue with it – at least not when I make it really small in browser (safari and chrome) or on my phone. But I have noticed that it can be funky when you are switching between Horizontal and Vertical at times (delay in changing – or plain out right sticking). But I think not many people would be doing that sort of thing very often for it to be a real issue (though could be wrong).

Still seem to be having issues with the logo displaying correctly across mobile devices it does seem – I thought things where working, but apparently not.

Also having a issues with the text body displaying correctly when it comes to the font page, at times the other pages as well. On screen it looks good, great spacing and everything yet the smaller you go for a device to view it the more issues the text has (you louse white space) and it starts to look like all paragraphs are coming together – looks unprofessional.

never mind the text issue fixed that, but the header issue still seems to remain

@nyxks

Have you got a link I can take a look at?