Lead Image not scaling on static pages

Hi,

The lead image gets cropped instead of getting scaled. Even when I have set the height attribute to :auto.

Link: page

thanks and regards,

him

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.page-id-57 .header-image{
   background-image: none !important;
   height: auto !important;
}

.page-id-57 .header-image .header-inner{
   display: block;
}

Let me know how it works.

Regards,
Kharis

Added it to my child theme’s style.css but no effect, Kharis. Thanks for trying.

best,

him

Dear Him,

I examined your child theme’s CSS code using this tool. It contains several errors. Please fix it and reload your site.

Regards,
Kharis

Dear Kharis,

I copied my entire child theme css to the validator tool, and here is the screenshot of the errors. Only 4 errors and none of which relate to the lead image, they are related to the price table. I have also corrected the errors, thanks.

Dear Him,

Great! It seems like it the lead image scaling has been resolved. So I am marking this thread as resolved.

Regards,
Kharis

No, Kharis, the lead image scaling issue stands as it is. The child theme errors were not related to the image, so they didn’t affect it also.

Hello there,

So sorry for the delay, please try to clear your web browser’s cache and reload your site. If your site is being cached by a plugin like W3 Total Cache, please empty all cache.

Regards,
Kharis

Thanks for the help Kharis.

Now, going down from widescreen till 768px it shows the original size, without reducing it. Then from 480px downwards it reduces it nicely and stepwise - 480, 320, 240.

In my case most of the images have the central focus on right side and not center, so I need to have the 768px size also reduce the image.