liquid image width catch 22 with templates

Hi,

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, 3 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: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mingpie, 3 years ago

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

roshodgekiss roshodgekiss, 3 years ago

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


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098