Header Logo Image not responsive on iphone

[Capps]

I’m having issues getting my header image to respond to the iphone’s display size, Im using superfly menu and the hamburger lays neatly next to the logo on android devices and all other devices, but the logo overtakes the hamburger (behind it) on iphones, I can’t seem to figure out the media query to solve this issue, here is a screen shot

and here is what i would like it to look like on iphones

Any help would be immensely appreciated as I’m hoping to go live with this site asap. URL and Login are in secure note. Thank you!

[Capps]

I think I may have just solved my own issue using this…

}@media (max-width: 767px){
.x-brand img {
width: 380px;
}
}
@media (max-width: 480px){
_ .x-brand img {_
_ width: 275px;_
}
}
@media (max-width: 320px){
.x-brand img {
width: 100px;
}
}@media (max-width: 375px){
.x-brand img {
width: 120px;
}
}

[Capps]

now the header image is insanely small on other devices… where am I going wrong?

[nabeel]

Hi Travis,

Thank you for reaching out to us. You can remove the last two break points from your code, that’s where you’re defining the width too small. I believe 275px would be enough for smaller screens. You can replace your code with this:

            @media (max-width: 767px) {
                .x-brand img {
                    width:380px;
                }
            }

            @media (max-width: 480px) {
                .x-brand img {
                    width:275px;
                }
            }

Hope this helps!