[Lucius Douglas]

I’m trying to adjust the height of the logo for mobile devices. However, it is not recognized by the theme.

URL: https://headlandcountryclub.org/

The code is:

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

However, inspect shows this:

.header-area, .header-area .container, .header-area .container .logo {
height: 80px;
max-height: 80px;
}

@media screen and (max-width: 980px)
.logo {
padding: 0 0 15px;
margin: 0 auto;
float: none;
}

@media screen and (max-width: 980px)
.logo {
position: relative;
width: auto;
margin: 0;
text-align: center;
top: auto;
max-width: none;
}
.logo {
float: left;
max-width: 22%;
text-align: left;
padding: 0;
top: 5px;
position: relative;
z-index: 999;
}

I have the CSS in the Customize > Additional CSS. I was under the impression that this takes precedence over preceding CSS code. Am I wrong?

[Grace Support]

Hi,

To display the logo image fine on the mobile device

Go to the Appearance -> Customize -> Additional CSS
Add below css code

.logo img { height: 90px !important; }

Regards
Grace Themes

[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

[Grace Support]

Hi,

Please send your website URL and WordPress admin login details at [email protected] so we can check and assist you quickly.

Regards
Grace Themes

[Lucius Douglas]

I sent a password reset for your account.

[Grace Support]

Ok, thanks

[Author]

Posts