1. This might just be a copy and paste error but you should check and make sure that your quotations are not "pretty" quotes. When I copied and pasted your image module into a template on my portal it threw an error because the quotations were not straight quotes.
2. spacing in your code. This may or may not be part of your issue but where you define your label there is space before and after the = sign.
3. Your styles are being applied directly to the img tag that is output by the module code, however class is not actually a Hubspot Module parameter. The correct parameter is extra_classes="".
4. Hubspot auto wraps modules in a span tag. here is the current markup coming from your module:
If you chance class to extra_classes then you class will be applied to this span tag. If this span tag is what is causing your issues you can remove it by using no_wrapper=True in your module code, however extra_classes will not work because with the span tag gone there is nothing to apply the class to. Unfortunately there is not way to apply classes to the actual elements that are output my module codes, just to the optional wrapper span tag for the modules. It's a little silly in my opinion.
I'm removing your url and styles to make the code shorter -
I changed all of your quotation marks, formatted your attributes, and added missing commas so you may want to copy one of the above.
If niether of these work then I would suggest using export_to_template_context=True. It's more complicated but allows for ultimate control over your code.
1. This might just be a copy and paste error but you should check and make sure that your quotations are not "pretty" quotes. When I copied and pasted your image module into a template on my portal it threw an error because the quotations were not straight quotes.
2. spacing in your code. This may or may not be part of your issue but where you define your label there is space before and after the = sign.
3. Your styles are being applied directly to the img tag that is output by the module code, however class is not actually a Hubspot Module parameter. The correct parameter is extra_classes="".
4. Hubspot auto wraps modules in a span tag. here is the current markup coming from your module:
If you chance class to extra_classes then you class will be applied to this span tag. If this span tag is what is causing your issues you can remove it by using no_wrapper=True in your module code, however extra_classes will not work because with the span tag gone there is nothing to apply the class to. Unfortunately there is not way to apply classes to the actual elements that are output my module codes, just to the optional wrapper span tag for the modules. It's a little silly in my opinion.
I'm removing your url and styles to make the code shorter -
I changed all of your quotation marks, formatted your attributes, and added missing commas so you may want to copy one of the above.
If niether of these work then I would suggest using export_to_template_context=True. It's more complicated but allows for ultimate control over your code.
Converting Images for Email Templates (Coded Files)
SOLVE
Hey Jsum,
Thank you so much for your help! I tried the both lines of code you suggested and am still running into mobile responsiveness issues. I will look into the Export To Template module as another solution. Thanks again!
Converting Images for Email Templates (Coded Files)
SOLVE
which clients are you having issues with?
most outlook clients require height and with attributes, not inline styling. you still want to use the inline styling but it will default to the height and width attribute in outlook.
Media queries don't work in a few clients including the gmail app for android which is a pain. If you are resizing your image with a media query it won't work.
Converting Images for Email Templates (Coded Files)
SOLVE
I'm having issues with the native mail app on iPhones and the Gmail app on iPhones.
The header font is much smaller with smaller margins on the sides with the Hubl code, while the header is larger and the email has larger margins with the original styling.