New Landing › How can we help? › Themeforest Theme Support › Uplift › Logo is resized distorted

Viewing 10 posts - 1 through 10 (of 10 total)
  • Back to forum
    Posted in: Uplift
  • April 2, 2017 at 2:36 pm #319343
    nosuchagency
    Member
    Post count: 226

    Hi

    Logo is shown distorted – see this:

    1) https://www.dropbox.com/s/jgj9wh7exlg2jhy/Screenshot%202017-04-02%2015.29.29.png?dl=0 (Right)
    2) https://www.dropbox.com/s/y03usoopxeio09k/Screenshot%202017-04-02%2015.29.33.png?dl=0 (After scroll, wrong)

    Thanks

    April 3, 2017 at 5:13 pm #319477
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Can you try to clear the browser cache? I’m seeing it fine in desktop and mobile resolutions.

    What browser are you using? I tested in Chrome.

    -Rui

    April 3, 2017 at 7:30 pm #319497
    nosuchagency
    Member
    Post count: 226

    Hi

    1) Look at logo when the page is in “naked header” mode (just load the page).
    2) Scroll down the page (as much as you want).
    3) Look at logo again.
    4) Help me figure out why the logo gets distorted.

    🙂

    Thanks

    April 5, 2017 at 9:31 am #319723
    David Martin – Support
    Moderator
    Post count: 20834

    I see-

    Make your logo a greater DPI so it does not loose quality has it’s scaled down. 300 DPI should do it.

    April 5, 2017 at 4:04 pm #319823
    nosuchagency
    Member
    Post count: 226

    Hi

    First, this has nothing to do with losing quality.

    Second, DPI has no place when talking about bitmap images on the internet – DPI is for printing. 🙂

    Third, when we (my designer and I) scroll down in every browser on a Mac, the logo goes from fine (https://www.dropbox.com/s/2mzyfla1z9jaqa0/Screenshot%202017-04-05%2016.58.08.png?dl=0) to not fine (https://www.dropbox.com/s/87we17g8b52m4t2/Screenshot%202017-04-05%2016.58.16.png?dl=0).

    So:

    1) Can you see from the screenshots, that the logo is distorted in the second screenshot?
    2) If you can see it in the screenshot, can you replicate this in your own browsers?
    3) How do I fix this, so the logo keeps the same size on scroll?

    🙂

    Thanks

    April 5, 2017 at 4:41 pm #319829
    David Martin – Support
    Moderator
    Post count: 20834

    1) Ok.

    2)

    Second, DPI has no place when talking about bitmap images on the internet – DPI is for printing.

    – DPI can be used for retina devices, as can creating a double sized image.

    —

    1) I see your screenshot, yes it looks proportionally wrong.

    2) No, please see my above screenshot.

    3) What screen/device/retina or non-retina are you experiencing this on? One would assume the is a crucial bit of the report that you have omitted from your posts?

    If you inspect the source code on the device, you should be able to see what CSS is causing it.

    —

    4) You do not have an Uplift purchase code added to your profile, please add one as we cannot validate your purchase for this theme.

    5) As per the ThemeForest terms, you need a licence for each live site you make.

    – David.

    April 5, 2017 at 5:35 pm #319835
    nosuchagency
    Member
    Post count: 226

    Hi

    >DPI can be used for retina devices, as can creating a double sized image.
    No, “DPI refers to the physical dot density of an image when it is reproduced as a real physical entity, for example printed onto paper.” 🙂

    >I see your screenshot, yes it looks proportionally wrong.
    Perfect.

    >No, please see my above screenshot.
    Strange. 🙂

    >What screen/device/retina or non-retina are you experiencing this on? One would assume the is a crucial bit of the report that you have omitted from your posts?
    No need to be passive-aggressive – nobody asked me about this before now. I’m on a 13″ Retina Macbook Pro (2016 edition – with the stupid bar). We uploaded both normal and retina logo’s in the logo settings.

    Normal: http://twinbody.almostthere.io/wp-content/uploads/2017/04/Twinbody-logo.png
    Retina: http://twinbody.almostthere.io/wp-content/uploads/2017/04/Twinbody-logo-retina.png

    >You do not have an Uplift purchase code added to your profile, please add one as we cannot validate your purchase for this theme.
    Added!

    >As per the ThemeForest terms, you need a licence for each live site you make.
    Of cause. 🙂

    Thanks

    April 6, 2017 at 9:40 am #319874
    David Martin – Support
    Moderator
    Post count: 20834

    No, “DPI refers to the physical dot density of an image when it is reproduced as a real physical entity, for example printed onto paper.”

    – In Photoshop, create a 300 dpi PSD document. You will find this renders very nicely on retina devices also.

    Add this to Theme Options => Custom CSS:

    .full-center #logo.has-img a > img {
    max-height: initial;
    max-width: 150px;
    padding: 0;
}
    April 6, 2017 at 2:17 pm #319940
    nosuchagency
    Member
    Post count: 226

    Hi

    >In Photoshop, create a 300 dpi PSD document. You will find this renders very nicely on retina devices also.

    You can create a 10x10px 300dpi PSD document, and you can create a 300x300px 10dpi PSD document – if I export these to .png, I promise you, that the 300x300px version in 10dpi has a few more pixels. 😉

    DPI (dots per inch) is for printing – it’s a way to tell the printer how many pixels/dots of the image it should print (use) per inch. On the web we use pixels, so if the grid is 1180px, and I want an image to be 100% width, I need an image which is 1180px wide… I don’t need a 300dpi image because dpi don’t tell me anything about pixels – just that when this image is printed it will print 300 pixels per inch. Yes? 🙂

    Thanks for the css – will this be fixed in a future release?

    Thanks

    April 6, 2017 at 2:49 pm #319944
    David Martin – Support
    Moderator
    Post count: 20834

    Glad to help you out.

    Will test further and get a patch submitted for review.

  • Back to forum
    Posted in: Uplift
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.