[Lucius Douglas]

The problem is NOT the image. The logo image on desktops/laptops has a height of 125px which is what I want it to be as it overlaps the navigation menu but on mobile it should be below the top bar and above the ‘header-contact-info’ DIV. This is the same height for all devices.

The problem is that the media query CSS code I have is not being recognized for the ‘logo’ DIV which has the image inside the DIV. It is set to 80px which means part of the text is intruding on the ‘logo’ DIV. That’s why I am attempting

@media screen and (max-width: 980px)
.visible-phone {display:block !important}
.visible-tablet,
.visible-desktop,
.visible-large {display:none !important}
.header-area .container .logo {
height: 125x !important;
max-height: 125px !important;
}

However, the following CSS media query is recognized from the responsive.css file.

@media screen and (max-width: 980px)
.logo {
position: relative;
width: auto;
margin: 0;
text-align: center;
top: auto;
max-width: none;
}

The media query is the same on both.

So why isn’t the code in the Appearance > Customize > Additional CSS recognized? It should take precedence.

I tested this on Chrome, Edge and Firefox on both my desktop with the browser reduced in width to a size of 485px as well as on my Samsung Galaxy S23 Ultra. None of the code is recognized.

FYI, I have cleared my