- This topic has 7 replies, 2 voices, and was last updated 3 years ago by
.
Hello,
i have read your solutions/advice on how to get a crisp logo, which does look good for retina displays also.
First of all I have to say i am wondering why there is no retina logo option in the settings in the year 2021. This is a must-have to guarantee the perfect display of a logo on every viewport/resolution.
Anyways:
i have built a custom header where i can only set the logo but not (as in the general theme settings) fixed sizes. So the Logo will look okay depending on the resolution but look very blurry on retina displays for example.Could you please provide info/best-practice on how to guarantee the logo to look crisp?
Can I use an SVG Logo in the custom header which scales autmatically?
How can i set the size if i use an SVG?
Any other ideas?Link to our website is in the private info field.
I provided a Login on another of my tickets earlier as well, if needed.This is the last little piece of help we need to be perfectly satisfied with our website and your theme 😉
Thanks in advance and have a great week.Hi @neunneun,
I hope you are well today and thank you for your question.
Please just use twice the size of the logo image that you have currently set so that it will display correctly on retina display.
Best regards,
Shufflehound teamHello,
thanks. Will the Logo not be displayed double the size then?
How can i restrict it to the original smaller size?
The custom header builder does not have any option to set the size for the logo, it will just take whatever logo will be selected, right?
Or will it take the sizes from the genereal theme settings if i disable auto size and enter the exact pixel settings?You can control the custom header logo size by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-header-builder-main .sh-header-builder-logo img { max-width: 150px; }Hello,
unfortunatly the Logo display still isn´t right.
It is very disappointing that it is so complicated to get a decent resizing Logo that also works with retina displays in modern times.Please check the Links and screenshots in the “private info field” and “attachments”.
With the css edit the Logo now displays correctly on desktop view-port and it is sharp also on retina displays BUT the mobile view shows the Logo in a bigger version. Why is that? Where can the size of the tablet and mobile be changed?
Why is responsiveness broken here?Could you please provide a fix for the mobile view?
Also how to add a 5px space on top and bottom of the Logo without using the padding option in the header builder since this will add a padding not to the top of the logo but to the top of the header/topbar.Is there a best-practice to use an .svg as a logo?
I had asked that before but unfortunatly did not get an answer yet.Thanks in advance and best regards
The logo displays fine for me on mobile as shown in the attached screenshot.
Please test it clearing your browser cache or using a different browser.
Currently, there is no option to use the SVG logo without developing custom code.
You can add a 5px space on the top and bottom of the Logo by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-header-builder-main .sh-header-builder-logo img { padding: 5px 0; }Hello,
it displays fine because we fixed it in the meantime. Thanks for the feedback though.
It is using an .svg now actually.Awesome great to see you got that fixed.
Please advise if you have more questions.
Have a fantastic day!
