Optimized Images in ACM

hw180

Would there be any suggestions on modifying ACM or other alternatives so that CSS that has media breakpoints to load appropriately-sized images are not overridden by the modules inline background images? In this age of mobile optimization, it makes no sense to load 1920px+ wide images on a cell phone.

saguaros

Hi hw180

May I know which type of JA ACM are you using? Pls share the credentials of your site so I can take a look.

hw180

Hello and thanks for the reply. The issue or question is not specific to my web site. Please see the demo:

https://www.joomlart.com/demo/ja-morgan

On desktop, the hero with the gentleman on the cell phone uses the image: background-image: url(https://ja-morgan.demo.joomlart.com/images/joomlart/slideshow/item-1.jpg);

When switching to mobile (in my case, I set DevTools to iPhone X). the gentleman is cannot be seen in this viewport size, but the same image called: background-image: url(https://ja-morgan.demo.joomlart.com/images/joomlart/slideshow/item-1.jpg);

I am using the same template and module. I configured my css with media breakpoint to use an appropriately-sized image. However as in my original question, the CSS which would pull in a right-sized image is overwrittin the ACM module's inline style which uses only one image, which is oversized for mobile device viewports. I am looking for suggestions or ideas on how to remedy this issue.

Thanks

saguaros

Hi hw180

I got your point but JA ACM is just an advanced custom HTML module with some additional features added for template. It doesn't support option to load different image for mobile/desktop view yet, I will share with the team for further consideration on this.

Regards