Search code examples
wordpresscssmobileresponsive-designmedia-queries

Logo will not display appropriately on Actual Mobile Device [But does when changing desktop screen size]

Website logo is not displaying appropriately on the physical mobile device, I am using an iPhone X. However when changing the screen size of the desktop version; the logo adapts appropriately

I am modifying the theme, so please bear with me. I have attempted to modify the size with max-width tags

Code within the Custom CSS:

@media (max-width: 767px){
#logo .retina-logo {
    height: 35%;
    width: 45%;
    margin-top: -2px;
}
}


@media (max-width: 600px){
#logo .retina-logo {
    height: 90%;
    width: 60%;
    margin-top: -2px;
}
}

@media (max-width: 500px){
#logo .retina-logo {
    height: 100%;
    width: 90%;
    margin-top: 4px;
}
}

Feel free to view www.TattiniBoots on your mobile device to see what I am talking about. You will notice that the logo is very tiny and not the correct width that is displayed when changing the screen size on desktop

Solution

  • Apparently your media queries are in the wrong order on your website (inspector says the rules are inline on line 28 / 19 / 11 for 500 / 600 / 767px) - a different order than what you posted in your code above. So just reverse the order of those media queries, since otherwise the 767px rule will overwrite the others when it follows the others.