Make header text logo responsive

[cpb1g13]

Hi,

Can you please suggest a way to make my logo (text) responsive, so that it views better on mobile devices?

As it’s such a long name, it currently takes up half or more of the screen on mobile devices, so I’d like to it shrink when viewing on mobile.

Any ideas?

Thanks,

Callum.

[thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .x-brand img {
        width: 180px;
    }
}
@media (max-width: 480px){
    .x-brand img {
        width: 150px;
    }
}
@media (max-width: 320px){
    .x-brand img {
        width: 100px;
    }
}

[cpb1g13]

Thanks Thai, although it doesn’t seem to work. I’ve tried playing around with the pixels widths but there is no effect when viewing on a mobile device. What do you suggest?

[mldarshana]

Hi There,

The above workaround should work. What’s your device ? and also provide us with the link to your site.

Thanks!