Docs

[NicholasKS]

Hi Guys,

Basically what I want to do is have 2 different “logo width” values in customizer, one for Desktop and one for Mobile. I want the logo to be smaller when the site is viewed on mobile.

Im not sure if this can be done with CSS?

I have attached 2 screenshots, one with a view from desktop and another from mobile. The reason I want to change the logo width ONLY on mobile is to make the logo smaller so the nav mobile button isn’t touching the edge of the nav bar and is in-line with the logo. If its easier, is there any CSS code I can use to add padding around the button and centre it under the logo?

Im using the latest versions of X and cornerstone, running the renew Stack with in-line logo-navigation header if that helps at all. Thanks. 🙂

[NicholasKS]

Heres the desktop screenshot since it didn’t upload correctly.

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[NicholasKS]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 550px){
.x-brand img {
    width: 220px;
}
}

Let us know how this goes!

[NicholasKS]

Thanks!

It worked great and I adjusted the value to get it to fit perfectly. I appreciate your speedy response 🙂

Thanks for the awesome help X support!

[Paul R]

You’re welcome and thank you for your kind words!

[Author]

Posts