Retina settings - image displaying wrong

[underbitestudio]

Pro theme - 4.3.3
Hi, sorry if this has been answered but I can’t find the solution… I’m having an issue with retina display on a header image. It’s either half the intended size on high-res monitors, or double the intended size on low-res monitors, depending on whether the button is toggled on or off. I’ve only had this problem on one site, all the others seem to work as intended. Is there a known bug causing this? I have tried different object and fill settings to see if that might change something, but aside from writing custom CSS code for this (which I haven’t yet done) is there a configuration I haven’t tried that should fix this?
Thanks, Emmett

[tristup]

Hi Emmett,

Thanks for reaching out.
It will be very difficult to understand what is the reason behind your issue, I would suggest you troubleshoot the following common issues to recognize the problem.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.Child Theme Related issue ** If you have activated it
5.CSS/JS Customization

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above helps and you are still getting the issue, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[underbitestudio]

Thanks, I will provide login details as I can’t seem to fix it using the suggestions above.

[christian]

Hey Emmett,

First, you need to know what the Retina option is for. It will scale the image down to half the image size so the image would be sharp when viewed on a Retina screen usually used on Mac computers. If you don’t need the Retina feature, you can turn it off.

The Retina option is not the reason why the image is cut off on low res monitors and showing completely on high res monitors. The cause is your Pro Header Bar’s height is very short that it allows its content to dictate the height. Set the Bar’s Height to 700px so the image will be shown completely in any screen size (see screenshots in the secure note).

Just see the result of setting the Bar’s height for now so you could see its effect on the Image element. Please then detail what is your goal with the image so we could point you to the correct settings.

I’d also recommend that you learn the Flex settings available in the builders so you can lay things out efficiently. See https://theme.co/docs/use-flex-layout

Thanks.