Home › Forums › WoodMart support forum › Logo not sharp enough

Logo not sharp enough

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 8, 2021 at 4:31 pm #337840

    critoyact
    Participant

    Hello, Im having problems to display the logo correctly, especially the small letter of it.

    I’ve tried a svg file (large), and a .png with the exact width and height, but still it’s blured, can you please help me?

    Thanks,
    Cristian.

    December 9, 2021 at 12:31 am #337931

    Elise Noromit
    Member

    Hello,

    Please elaborate more details on how you would like your logo to be placed? https://gyazo.com/5933877045a93dff5e504255084813c1 I see this now.

    Best Regards

    December 9, 2021 at 12:00 pm #338083

    critoyact
    Participant

    Hi Elise, it’s not about the placement, it’s about image quality / sharpness.
    Some how the image’s quality is “downgraded” when I upload the logo, you can see in your screenshot it’s blurred (specially the small letters “desayunos a domicilio”)

    Thanks for your help.

    • This reply was modified 3 years, 4 months ago by critoyact.
    December 9, 2021 at 6:36 pm #338233

    Elise Noromit
    Member

    Hello,

    Please set the logo in the Logo element of the Header builder and try to upload an image in size equal to this container. You will need to try different sizes till you get the best.

    If you have any questions please feel free to contact us.

    Best Regards

    December 9, 2021 at 11:36 pm #338297

    critoyact
    Participant

    Hello, thanks for your answer, by “…in size equal to this container…” can you detail what do you mean? Where can I check the container’s size?

    Thanks,

    December 10, 2021 at 1:06 am #338316

    Elise Noromit
    Member

    Hello,

    Your logo is 245×68 please upload the equal image size or a bit bigger. https://gyazo.com/14ec4958b268f9af65b7efda024c22f2

    If you have any questions please feel free to contact us.

    Best Regards

    December 10, 2021 at 11:09 am #338473

    critoyact
    Participant

    Hello,
    Thanks that worked out. But I need to understand, because I’ve configure the logo width (on the header builder) to 225px (now is still like that)
    Why this <div>’s width is 245px? and were do I setup this <div>’s width and height?

    Thanks.

    December 10, 2021 at 11:26 am #338483

    Elise Noromit
    Member

    Hello,

    You need to enter the Logo element and you will find the option to set the width. The height is set automatically.

    If you have any questions please feel free to contact us.

    Best Regards

    December 10, 2021 at 1:58 pm #338539

    critoyact
    Participant

    Hello again, thanks for your answer,

    This is my point, I have set the logo width to 225px:
    https://gyazo.com/076e6f44951607d483e0e3d95a55d867

    just like the image was (before changing it), but the “div.site.logo” width is 245px (where is this set?)

    At the end, the image that worked was of a 280px width, even with the option set to 225px, I just need to understand.

    Thanks,
    Cristian.

    December 10, 2021 at 11:20 pm #338633

    Elise Noromit
    Member

    Hello,

    You can try to make the image width exactly as the logo width in the setting.

    If you have any questions please feel free to contact us.

    Best Regards

    December 18, 2021 at 11:26 am #340408

    critoyact
    Participant

    Hello again,

    So definitely there’s something wrong with this configuration.
    I did as you suggest: matched the width setting to the image width (280px) and now the div.site-logo changed to 300px and the logo isn’t sharp anymore.

    I don’t find the sense of this, why the div.site-logo changed to a width that noboby specify?

    – I have a Image with 280px width
    – I hace set the logo width to 280px to match the image’s one

    Expected result: div.site-logo width should be 280px so the logo display correctly

    Actual result: The div.site-logo changed to 300px, and the logo is displaying blurred and with low-quality.

    Thanks for your help, just need to understand how to use the best quality image for the logo.

    • This reply was modified 3 years, 4 months ago by critoyact.
    December 19, 2021 at 8:15 pm #340532

    Elise Noromit
    Member

    Hello,

    The logo takes all the space, you have set logo container width 300px and your image is 280px, as the result, the image is spreading and getting blurred.

    Try to set the logo with 250px and the logo would not be blurred. If you need a bigger logo, you need to upload a 300px logo or a bit bigger size.

    If you have any questions please feel free to contact us.

    Best Regards

    December 19, 2021 at 8:57 pm #340534

    critoyact
    Participant

    Hello,
    Please, before answer I will apreciate you read all the comments on this post.

    As for your comment:
    “you have set logo container width 300px”

    – I have NOT set the logo container at all (I’ve asked before how to set it, but they didn’t answered)
    – Regardeless of this, everytime I upload an image and set the logo width to the SAME image’s width, the logo container get’s bigger (before width was 245px with a image of 225px and now is 300px with an image of 280px)

    So whether there’s an issue (bug) or somebody is missing something, Im just tring to understand how this work.
    Please:

    – Explain how the logo container works and WHERE is set

    Thanks

    • This reply was modified 3 years, 4 months ago by critoyact.
    December 21, 2021 at 12:07 am #340768

    Elise Noromit
    Member

    Hello,

    The logo size depends on three conditions:

    1. Maximum width that is set in the Logo element: https://prnt.sc/23pdtty Logo cannot be wider than this value.

    2. The row height where the Logo element is added: https://prnt.sc/23pdvit

    3. Image size: image cannot get wider or higher than its initial real size. Image cannot be crushed or deformed in any way. The image width and height correlation should be the same on all the devices and header types.

    Logo width determines the max-width of the logo. For example, if the image size is 280px, you can set the max-width of the Logo up to 280 px, otherwise, the max-width more than 280px would not be effective as it would require an image wider than 280 px to come in force. In order to show the logo widger than 280px, you need to increase the image width in the image editor.

    If the row height is less than image height, the image would be reduced proportionally,

    You have set max-logo width 280px and you see 300px in the inspector: https://prnt.sc/23piluy

    Each header element container has the padding 10 px on each side to avoid tight alignment. Log max-width influences image img and does not influence the width of the container <div class="site-logo">

    As a result logo width is 280px https://prnt.sc/23pi0m1 container width is 300px = 280px image and 20px paddings.

    If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)