Squashed Featured Image on mobile devices

Hi there,
All featured images (except the home pg img) are being squashed on devices in the default Quark template, instead of minimising proportionally. Please find examples and kindly offer your recommended solution.
Website: http://www.horsham.org.au/

Thank you.
Meg

Hi,
You can remove this fragment:

Code: Select all

.entry-header > img,
#gk-header-mod img {
  height: 120% !important;
  max-width: none !important;
}



from small.tablet.css file, but in this case you can see grey background on the top and bottom of the image.

Thanks kindly, but the grey background wont be an acceptable solution unfortunately...
I'd appreciate your advice on how can we get around this as it's not an issue with the Joomla versions we've set up of this template?
Can you keep the width 100% but scale the height of the header (not just the image) proportionately?

Joomla uses only one image size for all screen resolution, WP use several image sizes (depends on the screen size), that's why you can see the difference.

Try to change mentioned fragment from small-tablet.css into:

Code: Select all

.entry-header > img,
#gk-header-mod img {
  height: 120% !important;
  max-width: none !important;
  width: auto;
}


That appears to have done the trick - well done!
Thank you so much.