liquid image width catch 22 with templates


Not sure if anyone has run into this, but for editable templates we need to define a physical width in the image tag. So i have my editable hero graphic set at width="528". I've set a media query to set it to scale it at 100% if the display port is smaller 480px. Everything looks great till we start swapping out the hero via the editor. The editor auto adds the width and height of the new hero image to the html not letting the image to scale for mobile devices (locking the width at 528px). Has anyone come across this or have any work around? Thanks in advance.

roshodgekiss roshodgekiss, 4 years ago

Hey mingpie, have you tried using the !important property in your @media query? For example:

@media only screen and (max-device-width: 480px) {
   img { width: 50% !important; } /* or whatever maintains the aspect ratio */
<img editable="true" width="528" />

Hopefully this will override the width set in your HTML and you'll be home free. Let us know if you have any questions about this :)

Get in touch with us on Twitter:
We're also on Facebook:
mingpie, 4 years ago

Yes. that did it. !important did the trick. Thank you so much.

roshodgekiss roshodgekiss, 4 years ago

You're very welcome, glad we could help out :D

Get in touch with us on Twitter:
We're also on Facebook:

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free