Unable to make the banner image re-size to fit into it's container

My site is an old version site, where you can make custom themes with html and css. I am using a custom theme with separate css for desktop and mobile.

I was experimenting with some of the responsive themes and noticed that the banner image will automatically re-size if the div becomes smaller than the width of the image.

I am trying to re-create this behavior on the desktop version of my own theme but it's not working. When the div containing the banner becomes smaller than the banner image, the image gets cut off instead of re-sizing.

When I use a % relative width for the pagewidth, everything else is re-sizing correctly except for the banner image.

I tried adding the following CSS, which did not work.

.banner img {

max-width: 100%;

height: auto;

}

Taking a look at sources in Chrome, it looks like my CSS is over-ridden because the banner image dimension is hard-coded in the HTML.

I don't know how the responsive themes are working, because those also have the banner dimension hard coded in the HTML.

How can I make my theme for desktop behave the same way as the responsive themes and re-size the banner image when the banner container is using a % size and it becomes too small?

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Topic Participants
james
chamber

Sticky Posts
Unveiling Zoho Sites 2.0 - A new dimension in website building
Dear Zoho Sites Users, We are thrilled to announce the launch of Zoho Sites 2.0 today! This refresh represents a significant step forward in the capabilities of Zoho Sites and is crucial for creating a lasting and positive impact on our customers' businesses.
Website Accessibility
I have two sites created in Zoho Sites which are both live. Some questions: 1. Are any of the template themes WCAG 2.1 AA compliant? 2. How do I change the format of a sub-heading in the header section? 3. Is there any way to add focus indication for
Visual Editor Webinar
Join our FREE live webinar to learn how to use the Zoho Sites Visual Editor to easily design your website. Our product specialist will demonstrate how this tool will help you customize your website to suit your requirements. Register here: https://www.zoho.com/sites/webinars/
SEO for your Zoho Sites Website
Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/
Zoho Sites Webinar | Integrations
Join our FREE live webinar to learn how to integrate both Zoho and third-party products with your Zoho Sites website. Our product expert will demonstrate how to use these integrations to grow, manage, and retain the customers you bring in. Learn how to take your business forward and build stunningly robust and efficient websites. Register here: https://www.zoho.com/sites/webinars/