Mobile Logo size change

Hey,
You can do this with css and a media query. How small would you like it? Do you mind posting a link?

Hannah

Hi,
our website is https://www.thetailoredmoment.com
we want the logo about 1/4 smaller than the one right now. What’t the css code?

Besides, the pixel of the logo seems so blurry while it’s all good using the website format. why is that? anything I can do to fix the image but not affect the website format?

Thanks for your quite response.

You can use this css to make your logo smaller on mobile:

@media (max-width: 768px) {
div#thelogo img {
    max-width: 150px;
}
}

Just paste that into your custom css box in Theme Options > Advanced Settings.

As for the blur, have you uploaded a retina logo (Theme Options > Main Settings)?

Hannah

Hey,

You can use this css:

@media (max-width: 767px) {
header #thelogo {
    max-width:150px
    }
}

Besides, the pixel of the logo seems so blurry while it’s all good using the website format. why is that?

That is because you have not uploaded a retina logo and most every mobile is an HD screen.

Kadence Themes

Thanks!! The logo size is now working great!

And thanks for the information about retina logo.. I have make a change later. ?? Thanks a lot!!

Hello,

I am having a similar issue. My logo for desktop and tablet is sized perfectly. But when I switch over to mobile then the logo runs too far right, covers the menu dropdown, and falls off the screen. I would like for the mobile logo to be 2/3 smaller than what it’s currently set to. Can you please help?

– My website is https://www.heartlanddronecompany.com
– I am using the Themify Ultra template.
– I’m not very familiar with code. I have installed the Simple Custom CSS plugin.

Thank you!

And now when I scroll down the page I’m noticing that the logo stretches vertically. I’m seeing this on mobile and desktop views. Any ideas?

Thank you!

Hi baseball21a,
This forum is for Virtue theme only. You would need to contact Themify Ultra’s support.

Hannah

OK thanks

Hi, I’m having a similar issue. The size of my logo on mobile is tiny, it’s fine on desktop. I’m a novice at all this but I have found the below in the css file….

#logo-layout {
margin: 0 auto;
max-width: 1200px;
width: 100%;
overflow: hidden;
}

Should I edit this section so the logo isn’t as small on mobile? If so what do I change the above to?

Thanks guys ??

Hi sweetc2001uk,
Can you please start a new thread and provide a link to your site?
Thanks!

Hannah