Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #938823

    Hi,

    I am setting up a website (see the link in the description)

    I have uploaded a logo 370 x 122 however it looks blurry on both mobile and desktop view.

    Please can you help me as to how can I improve the quality of the logo. A step by step guide will be very helpful.

    I have just realised the same issue is with all my websites, so I desperately need a solution.

    Kind regards,

    #938842

    Since then I have uploaded full size logo 4444 x 1300. The quality of the logo is better now but will this size 103kb slow down my website?

    How can I limit the logo size so it doesn’t show the logo in full size but rather in a particular size with high quality.

    Looking forward to your help.

    #938873

    can we see the logo ? ( or link to page ) – is it possible to have instead a svg ?

    #938894

    Hi Guenni007,

    Thank you for your reply.

    The site is under development.

    See above link.

    The logo shown has been uploaded as 4444 x 1300 pixels.

    #939010

    so this would be a great thing with svg – but that little subtext – even if it is sharp will be not good readable.
    i see you have for that spinning logo an alternative logo.
    Is it possible to have for the web f.e.:

    PS : it does not make any sense to have a very big image scaled by wordpress to a small one.
    It is better (not only on perfermance reasons) to reduce the size to the exact starting dimension which you need ( 250px x 88px )
    Graphic Programs do have better algorithms to scale images for web than wordpress can do.

    What Font do you have used for your logo ( is it Avalon ? – or Avant Garde Gothic ). – Or do you have your logo as Illustrator File ?
    So we can check my statement with the svg file

    Or maybe this could be an option for you:
    https://webers-testseite.de/cynthia/unite4-2/

    #939618

    Hi,

    The logo shown has been uploaded as 4444 x 1300 pixels.


    @projectt_co_uk
    : That size is quite unnecessary. Please resize the image to the actual size of the logo or header container which is 300x87px. Follow @Guenni007 suggestions.

    Best regards,
    Ismael

    #939999

    @guenni007

    Absolutely brilliant … what you have done with the logo in this link

    how can I do that?

    I have uploaded 300 x 87 without the slogan line and you can see the logo is not coming out sharp enough.

    Please can you advise me further.

    Thank you,

    #940002

    i will tell you soon – i’m still on a project and have no time yet – maybe in half an hour.

    #940017

    well first of all this is a little image trick with a png file – if you click to see in lightbox you will see how it is looking like:


    only the bottom is transparent and has a shadow surrounding that transparency.

    Download: (drag and drop from lightbox to your desktop) https://s18.postimg.cc/5znaf2kg7/Unite4.png?dl=1

    • This reply was modified 6 years, 6 months ago by Guenni007.
    #940022

    @guenni007

    that’s cool man.

    how will it look on the mobile … will it not make the header too big for mobile.

    Also how can I create a svg file for the logo … your help will be appreciated.

    I would love to see your work :)

    #940027

    it is a bit bigger to have some quality.

    pull the browser window a bit smaller till the burger menu appears.
    That is the behavior !

    these are the quick css entries:

    #header_main {
        border-bottom: none;
        box-shadow: 0 8px 5px -5px #999;
    }
    .responsive .logo {
        display: block;
    }
    .logo, .logo a {
        overflow: visible;
    }
    .logo img {
        height: 160% !important;
    	max-height: 130px !important;
    }
    
    @media only screen and (max-width: 767px) {
    .responsive #top .logo { display: block }
    } 

    if you have placed the code and image we will see how to adjust for your settings – do i have a link?

    #940035

    changings the rest wil be as it is:

     .logo img {
        height: 161% !important;
        max-height: 142px !important;
    }
    
    @media only screen and (max-width: 767px) {
    .responsive .logo  {
    display: block ;
    }
    .logo img {
        height: 161% !important;
        max-height: 129px !important;
    }
    } 
    #940039

    by the way there is a possibility to not shrink to the half but f.e to 60%

    #940040

    I don’t know if you have been told this but you are a star @Guenni007

    Love it … what you have done there.

    I have implemented and it looks awesome on both mobile and desktop.

    I would love to follow you on Facebook, can you give me link to your profile please.

    #940043

    but what did happen to your page now – there is a

    Coming Soon!
    In sha Allah

    No facebook – i’m a privacy person ;)

    Edit : aha a new link

    but change the values
    to the new adjusted for you values above !

    here is it in total:

    #header_main {
        border-bottom: none;
        box-shadow: 0 8px 5px -5px #999;
    }
    .responsive .logo {
        display: block;
    }
    .logo, .logo a {
        overflow: visible;
    }
    .logo img {
        height: 161% !important;
    	max-height: 142px !important;
    }
    
    @media only screen and (max-width: 767px) {
    .responsive .logo  {
    display: block ;
    }
    .logo img {
        height: 161% !important;
        max-height: 129px !important;
    }
    } 
    • This reply was modified 6 years, 7 months ago by Guenni007.
    #940045

    What does the last code do?

    I inserted that and the logo was cut off.

    Any idea how can I make the menu bit smarter for desktop and mobile.

    Thank you for all your help.

    #940049

    see above the total code – maybe your a bit mixed up .

    on resposive case ( smaller screens than 768px) the header height is set from enfold to 80px not your given (88px) so the values must be adjusted.

    by the way your background image is not set to cover the place. so there are sometimes white borders

    #940053

    to your menu – the font is very big 30px is suitable for people with a visual impairment ;)
    i think 24px will be more than necessary:

    #top #header .av-main-nav > li > a {
        font-size: 24px;
    }
    #940054

    Thank you for all your help.

    I appreciate that from the bottom of my heart.

    I have couple of questions if you don’t mind me asking

    1). How can I create categories like shown on this page https://muslimhands.org.uk/appeals (as you can see when I hover over it the text slightly comes on the image.

    2). How can I create a donate button in the header for mobile so it always shows a donate button between the logo and the burger menu.

    Once again I appreciate all your help.

    PS. I have adjusted the font size of the menu … how can I make the drop down menu better looking? Something like this https://www.islamic-relief.org.uk/syria-appeal/

    #940100

    tomorrow will be more time.
    but please do the adjustments first – its not perfect now https://kriesi.at/support/topic/logo-not-sharp-enough-on-my-website/#post-940043

    #940104

    Hi @Guenni007

    I have added the code but the logo doesn’t display the way it does on mobile.

    I liked the layout of first code for mobile. How can I do that with the new code.

    I like the overlay of logo on mobile as well.

    Thank you.

    #940233

    Give the rule an important:

    @media only screen and (max-width: 767px) {
    .responsive .logo  {
    display: block !important ;
    }
    .logo img {
        height: 161% !important;
        max-height: 129px !important;
    }
    } 

    and go to the first color-section and look to its options where you insert the images.
    A bit under the input field of Background Repeat setup as “stretch to fit — cover the element”
    and see if this isn’t better .

    • This reply was modified 6 years, 7 months ago by Guenni007.
    #940264

    to your questions from:
    https://kriesi.at/support/topic/logo-not-sharp-enough-on-my-website/#post-940054

    Enfold does not have that element –
    this is a masonry with perfect grid and show Titel and Excerpt on hovering: https://webers-testseite.de/categories/

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