SKT Naturo pro: Header images do not scale correctly

[Andreas]

Hi,

I encountered an issue around Header Images: When I select a Header Image for pages myself (as instructed I use 1400 x 272 as resolution) the image looks fine when the browser windows is wide enough. Once the browser size is decreased, the image scales, but it only scales in width, not in height. In the end, the image looks just squeezed when the browser window is narrow or when viewed in a smartphone browser.

When I select the same image as a featured image per page individually, scaling works fine.
Also when I remove the image, the default feature image scales correctly.

Can you help?

Thanks,
Andreas

[Sonl Sinha]

Hi,

Can you please provide your website link.

Regards,
Shri

[Andreas]

Sorry, can’t do for a web site that isn’t public yet. Happy to share via direct mail.

Best,
Andreas

[Sonl Sinha]

Hi,

Kindly find the css class for that image. and give it to height:auto;

Regards,
Shri

[Andreas]

Hi,

Sounds like a very good idea. Can you kindly tell me where/how to do that?

I am setting the image via Appearance->Header, but I don’t see any option how to modify the CSS…!?

Best,
Andreas

[Andreas]

Hi again,

When looking at the source, I can see that the following code is used when the image is set as an image header – and hence scales incorrectly:

<style type="text/css">
			.innerbanner123{
			background: url(http://mylittledomain.com/wp-content/uploads/2015/12/cropped-cropped-Capture11b2.png) no-repeat #111;
			background-position: center top;
		}
		
	</style>

When I set the image as the feature image for the page, I can see the following snippet – and it scales correctly:

<div class="innerbanner">                 
            <img src="http://mylittledomain.com/wp-content/uploads/2015/12/cropped-cropped-Capture11b2.png" alt="" />                             
    </div>

Best,
Andreas

[Sonl Sinha]

Hi,

Kindly go to Appearance>Theme Options>Basic Settings>Custom CSS box:
Paste this css code in custom css box:
.innerbanner img {height:auto;}

Regards,
Shri

[Andreas]

Awesome. Worked like a charm!

Thanks for your help.

Best,
Andreas

[Sonl Sinha]

Cool 🙂

Regards,
Shri

[Author]

Posts