Get all our 20+ Elementor themes worth $609 at just $59! Limited time offer. Get It Now

WordPress Website Templates

Find Professional WordPress themes Easy and Simple to Setup

inner banner

Reply To: Cleanup theme – media queries not recognized

#44324
Lucius Douglas
Participant

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