Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 1, 2018 at 1:53 pm #1004359
    VM

    Hi.

    Thank you for your super theme, it’s awesome!

    I have a little problem with the logo in the up side of the web of my blog, it’s nice on desktop but blurry in mobile devices.
    I have tried with different sizes but I can’t solve it.

    Could you help me please?

    Thank you.

    September 2, 2018 at 4:15 am #1004530
    Vinay

    Hey VM,

    The font is very thin and the blur is expected if the size changes.

    Please convert the png to svg and upload an svg logo in your theme options.

    Best regards,
    Vinay

    September 2, 2018 at 9:52 pm #1004720
    VM

    Thank you but it’s not working.
    Image is bad converted.

    September 3, 2018 at 6:43 am #1004784
    Vinay

    Hi,

    Thank you for getting back to us. I check the example yes it is not rendered correctly, please convert the image to svg using any other software and replace the png logo to fix the blur issue on the mobile phone.

    Best regards,
    Vinay

    September 3, 2018 at 12:17 pm #1004911
    VM

    Thank you.

    I have done it and in mobile devices is perfect, but now is blurry in desktop devices.

    Could you help me please?

    Thank you again for your help.

    September 3, 2018 at 12:55 pm #1004920
    Milan

    Hello VM,
    we don’t see the link, anyway – usually I use logo double size.
    If I set header 70px height then my logo has image height 140px and it is sharp everywhere.

    If I have logo made only from text, then I am not using image, but text only over this code in function.php:

    add_filter('avf_logo_final_output', 'avf_text_logo_final_output');
function avf_text_logo_final_output($logo){$link = apply_filters('avf_logo_link', home_url('/'));
$logotext = "Company Name";
$slogan = "This is some nice slogan below";
$subtext = "";
$subtext = "<span class='yourcssformatting'>$subtext</span>";
$logotext = "<span class='yourcssfirstword'>$logotext</span>";
$slogan = "<span class='yourcssslogan'>$slogan</span>";
$logo = "<h6 class='logo bg-logo'><a title='Text appear when mouse hover' href='".$link."'>".$logotext."$subtext<br/>$slogan</a></h6>";return $logo
;}

    Please note you can change h6 to h1 or h2, what will fit your SEO needs.

    Anyway, you can have some “fun” with setting CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
    Also keep in mind that internet browsers are rendering images differently: chrome, firefox, ie. It is driving me crazy sometime :)

    Best wishes,
    Milan

    • This reply was modified 6 years, 2 months ago by Milan.
    September 3, 2018 at 1:13 pm #1004929
    VM

    Thank you, but the logo is a image with an icon, I can’t put on text.
    If I put a small logo, then is blurry on mobile devices, and if I put a larger one then is blurry on desktop devices.

    Link is on ht first message, I add it again.

    You can convert to SVG here: https://convertio.co/es/png-svg/

    Thank you for your help.

    September 3, 2018 at 2:56 pm #1004993
    Victoria

    Hi VM,

    Could you please clear the cache, check again and get back to us.

    Best regards,
    Victoria

    September 3, 2018 at 9:33 pm #1005163
    VM

    I have done it and still be blurry.
    Thank you.

    September 4, 2018 at 9:11 am #1005328
    Vinay

    Hi,

    Please add the below code to Quick CSS. This will disable the svg logo on the desktop and display a png logo.

    @media only screen and (min-width:767px) {
.logo a img {
display: none;
}
.logo a {
background: url('https://victormorales.net/wp-content/uploads/2018/08/logo.png') no-repeat;
background-size: cover;
width: 260px;
height:50px;
position: relative;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}

@media only screen and (min-width:990px) {
.logo {
margin-top:20px;
}}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.