I have a Grid Row that has two columns in it. Each column has an Image element in it. How do I get those images to continue scaling even after they have reached their full size so they continue to fill the screen?
I have tried to add CSS to each image but it doesn’t seem to work?
.imagescale {
width: 100% !important;
height: auto !important;
max-width:100% !important;
}
Hey Scott,
Can you provide a link to the site/page in question so we can look into this further?
Best regards,
Jordan Shannon
Here is a link to the page
If you go halfway down the page you will see four images of a booklet. These images are 900px wide so once the browser gets to about 2000px wide you start to see them separate out a bit with.
Hi,
It looks like you are not targeting the actual images, maybe this will work?
.imagescale img {
width: 100% !important;
height: auto !important;
max-width:100% !important;
}
Best regards,
Rikard
That didn’t seem to work? I even tried putting the CSS Class on the cell as well as the image.
Hi,
Have you made sure to hard clear the cache a few times over?
Best regards,
Jordan Shannon
I viewed it in a browser that I have never accessed that page before with so I don’t think that matters.
Hi,
Try adding this css code:
.imagescale .avia-image-container-inner {
display: block;
width: 100%;
}
Let us know if this helps.
Best regards,
Nikko