SKT Naturo pro: Header images do not scale correctly

Home Forums All Other Themes SKT Naturo pro: Header images do not scale correctly

This topic contains 8 replies, has 2 voices, and was last updated by  Forum Moderator 2 years, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #16119

    Andreas
    Member
    • Topics: 1
    • Replies: 4
    • Total: 5
    Member since: December 4, 2015

    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

    #16125

    Forum Moderator
    Member
    • Topics: 0
    • Replies: 17689
    • Total: 17689
    Member since: August 16, 2013

    Hi,

    Can you please provide your website link.

    Regards,
    Shri

    #16127

    Andreas
    Member
    • Topics: 1
    • Replies: 4
    • Total: 5
    Member since: December 4, 2015

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

    Best,
    Andreas

    #16134

    Forum Moderator
    Member
    • Topics: 0
    • Replies: 17689
    • Total: 17689
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Shri

    #16138

    Andreas
    Member
    • Topics: 1
    • Replies: 4
    • Total: 5
    Member since: December 4, 2015

    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

    #16140

    Andreas
    Member
    • Topics: 1
    • Replies: 4
    • Total: 5
    Member since: December 4, 2015

    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

    #16144

    Forum Moderator
    Member
    • Topics: 0
    • Replies: 17689
    • Total: 17689
    Member since: August 16, 2013

    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

    #16145

    Andreas
    Member
    • Topics: 1
    • Replies: 4
    • Total: 5
    Member since: December 4, 2015

    Awesome. Worked like a charm!

    Thanks for your help.

    Best,
    Andreas

    #16146

    Forum Moderator
    Member
    • Topics: 0
    • Replies: 17689
    • Total: 17689
    Member since: August 16, 2013

    Cool 🙂

    Regards,
    Shri

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.