How to make logo text responsive

Support
#1

Hi,

I asked this question already unfortunately didn’t resolve the issue and I allowed the thread to expire.

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.

I tried this code suggested in the old thread but it didn’t work:

@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;
}
}

I’m viewing on an iphone 7, and my website URL is: trainyouradopteddog.com

Any ideas?

Thanks,

Callum.

#2

Hi Callum,

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.

Thank you.

#3

Hi Jade,

My URL is provided in the original post.

Do you mean the admin panel url?

If so, it’s: trainyouradopteddog.com/wp-admin

Kind regards,

Callum.

#4

Hey Callum,

Please use following Custom CSS.

@media (max-width: 767px)
{
    .x-brand {
           font-size: 22px;
    }
}
@media (max-width: 480px){
    .x-brand {
           font-size: 20px;
    }
}
@media (max-width: 320px){
    .x-brand {
           font-size: 18px;
    }
}

Change font size according to your requirements.
Hope this helps

Regards

#5

I’m having the same challenge but the above code didn’t work for me.
Any other suggestions?

http://turquoiseprimarycare.com/

#6

Hi @teleomorph,

That code should work fine.

Where did you add that code?

I couldn’t find it on your website.

Regards!

#7

I removed it when it didn’t work but have now put it back (and it still doesn’t seem to work):

http://turquoiseprimarycare.com/

#8

Hi There,

Update the given CSS code to this:

/*text brand size on mobile */
@media (max-width: 767px){
    .x-brand.text {
           font-size: 1.25rem;
    }
}

Adjust the 1.25rem value where you see it fits.

Cheers!

#9

thanks! that worked.

#10

You’re more than welcome, glad we could help.

Cheers!