Logo is resized distorted

[nosuchagency]

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

[Rui Guerreiro – SUPPORT]

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

[nosuchagency]

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

[David Martin – Support]

I see-

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

[nosuchagency]

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

[David Martin – Support]

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.

[nosuchagency]

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

[David Martin – Support]

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;
}

[nosuchagency]

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

[David Martin – Support]

Glad to help you out.

Will test further and get a patch submitted for review.