Custom Logo Size
sppmasterspp opened this issue · 11 comments
I've set custom logo for a site according to the help info. The logo does show up on the site but the size is really small (~25 pixels
only). It's hardly visible. I've uploaded high resolution .png file but cannot change the logo size.
Adding a Logo Image
Now that you know what’s better to do when setting up your logo, here’s what you have to do in order to upload it on your WordPress site:
In your WordPress Dashboard go to Appearance → Customize → Site identity → Logo
In the new panel that opens out click the Select Logo button to open the Media Manager.
Select an image that’s already in your Media Library, or upload a new one.
When you finish you’ll see the logo in the preview window.
To activate the logo on your site, click the Publish button.
It couldn’t be easier than that, and you’ve already made an important step in order to personalize your upcoming website.
Hey @sppmasterspp,
First of all, thank you for reporting this problem.
I have made a fresh installation of Rosa2 Lite to test this issue and I saw the logo size looks good:
If you still want to increase the height of the logo you can add the next snippet in Appearance -> Additional CSS:
:root { --theme-header-logo-height-setting: 22; }
Please let me know how that worked for you.
Thanks for your answer. Using the CSS :root { --theme-header-logo-height-setting: 22; }
you suggested resolved the issue only for desktop browsers. I had to change 22 to a bigger value in my case.
The logo is still somewhat undersized om mobile browser though. Can that size be changed too.
Edit: I tested the look of the site after applying the CSS snippet but it seems that the mobile version of the site is broken when I apply the CSS. The site width is not properly adjusted and in this case it is useless.
Hey @sppmasterspp,
I am glad that you problem has been fixed on desktop. If you still consider that your logo is too small on mobiles, you can add the next snippet in Appearance -> Additional CSS:
.site-logo[class] img { max-height: 40px }
, and replace 40px
the size that is doing the job for you.
It will help me a lot if you can give me a link to your website.
Let me know how that worked.
Actually both CSS snippets destroy the mobile version of the site. Where I can send you a link to the website in private so you can look at it.
Please have a look here first
Especially the mobile version. Currently I've set the value to 90px.
On mobile version there is a big white field on the right side of the page and the page can be scrolled horizontally which should not be the case, I think.
If I use a value of 40px there is no white gap on the right but the logo seems a bit smaller on desktop version.
It looks like the problem is not related to the height of the logo on mobiles, but how .site-title
is being hidden.
Please use the following snippet and your problem should be solved:
@media screen and (max-width: 1000px) { .site-info { display: none; } }
Let me know if that worked for you.
It is OK with @media screen and (max-width: 1000px) { .site-info { display: none; } }
added.
Only the site footer has now disappeared on the mobile version but that is bearable.
In this case should I file a ticket for these negative effects?
Hey,
It looks like the footer is using the same class, this is why is being hidden on mobiles. You just have to modify the snippet to be more specific with something like this:
@media screen and (max-width: 1000px) { .c-branding .site-info { display: none; } }
@madalingorbanescu
Thanks a lot for your help. Adding the last CSS snippet really resolves all of the above. I'll look a little bit more just in case I missed something else.
I am glad that I could help.
I am going to close this issue and if you are encountering any problems, I am encouraging you to open a ticket using the Theme Help button.
Also if you enjoy using Rosa Lite, it will help us a lot if you can give as a review here.
Stay awesome,
Madalin