Docs

[Daniel]

Hi there,

I’m having issues with the logo sizing on tablet and smaller devices. Currently, I’m shrinking the menu navbar text with this css:

   /* header font size on mobile */
    @media screen and (max-width: 1245px){
.x-navbar .x-nav > li > a {
font-size: 11px !important;
}
    }
    
@media screen and (max-width: 1110px){
.x-navbar .x-nav > li > a {
font-size: 11px !important;
}
}
    
@media screen and (max-width: 1045px){
.x-navbar .x-nav > li > a {
font-size: 10px !important;
}
}

And am trying to shrink the logo along with it, but it’s not working. Basically, the main problem is that the menu items pop below the logo on certain tablet sizes. Not good. It needs to either stay flat across all devices, or pull the mobile navbar button sooner.

I currently have this code trying to shrink the logo on tablet devices, but it’s not doing anything:

/* mobile logo size */   
/* Portrait and Landscape */
@media only screen and (min-device-width: 924px) and (max-device-width: 1124px){
.x-brand img {
   width:27%;
   position: absolute;
   top: 20px;
}
}

Could you help me with this? I’m open to doing anything that will do the above: making sure the menu items do not pop below the logo on any screen size. Either keep everything flat and shrink all items as the screen gets smaller, or have the mobile navbar pop out sooner.

Here is the website.

Thanks!

[Daniel]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! Please check your entire custom CSS here: http://csslint.net and resolve all the syntax errors.

Only then add this custom CSS to resize the logo on certain screen width.

@media (min-width: 980px) and (max-width: 1125px) {
	.x-brand.img {
		width: 10%;
	}
}

Let us know how it goes.

Cheers!

[Daniel]

Awesome. Got it. Thank you!

[Joao]

You are welcome 🙂

[Daniel]

Hey,

Sorry. I just noticed there is a zoom issue happening on mobile devices. Whenever you zoom, it blows up the header and logo beyond the ability to even see what’s below.

Do you know how to fix this?

[Jade]

HI there,

Would you mind elaborating what do you mean by zooming the logo on mobile?

I tried checking it and it seems to be working fine.

Thank you.

[Author]

Posts