Header logo – when turning the mobile device screen, logo doesnt change properly

[sandyms]

Is there a way to have my header logo work properly if I change my mobile device from looking at the site vertically to next turn my phone sideways, and have the logo fit in the top area still?

Try it by looking at it on your mobile and then turn your screen… you will then see what I mean.

I am close!

Also, once you look at it horizontally, then when you go back to the vertical view on the mobile, the hamburg moves too low.

I have this in the custom-newcolors.css.

@media (max-width: 400px) {
#header .header-logo img {
width: 247px !important;
height: 63px !important;
}
}

---

Template Version: 5.7.1

[Support]

Hello, you can add the “orientation” on media query, example:

@media (max-width: 991px) and (orientation: landscape) {
	#header .header-logo img {
		width: 100% !important;
		height: auto !important;
		max-width: 200px !important;
	}
}

---

[sandyms]

Amazing! It worked perfectly! Thank you so much!

I really appreciate your help.

Take care

---

[Author]

Posts