My banner images are not resizing

Question

I'm having some issues with images inside a "Banner" on my website. They fit perfectly on a tablet view, but if you open them in a desktop browser the images are a constant size. When you adjust the width of the browser window they are either off set to the left of the boarder or start disappearing when you shrink the browser.

 

www.ucandrive.com.au - The images in question are the top 3 on the left hand side.

 

Thank you in advance

Answer 1

Hi

Please add the following custom css at TemplateToaster -> General -> Editor -> Css

.banneritem > img {

    display: block;

    height: auto;

    max-width: 100%;

}

Comments

Thank you for that, but it doesn't seem to be making any difference :(

Edit:
It's all good, live help took the > out and it works perfectly.

---

Hi, there's a similar issue I've discovered using Klixo Slideshow Plus for Joomla: the img {max-width: 100%;} in template.css is applied only to display width < 1024px.

I've discovered this because Klixo did correctly resizes images to full screen width if screen width is < 1024 but if it is >=1024 Klixo shows images in their original size (2000x500 px) cropped at right side.

Adding img {max-width: 100%;} to TemplateToaster -> General -> Editors -> Css fixed the problem.

Would you be so kind as to fix this in next releases, please?

Thank you!