I've been speaking with a hubspot rep on the phone who has directed me here for tech help. The social images in my email seem to be displaying at full width on mobile - the hubspot rep identified that it was this (below) 100% width code in the source code that is caysing it - but he could not find this in the email itself - please can you help or advise how i can fix this?
These media queries are fed from the "responsive" setting on HubSpot email templates.
There are two way you can amend this:
If you go into your template (click the "settings" tab at the top of your email editor and scroll down to select the "edit template" button. Then select "open in design manager" on the top right of this new pop up). You will see an "action" and then "make basic". This will take away any responsive styles from your template, including this width:100% on your images. However, this may affect other elements of your template so this may require some manual re-styling through css.
You can override the responsive styles for your social icons through the inline styling. If you click on your social sharing icons module you will see the text options box open at the top. If you select "source code" (the icon that looks like this <>) you will see the html behind your social icons. In here you can add in something along the lines of "style="max-width:200px !important" to override the width for this icon. This will have to be added individually for each icon and you can change the 200px to whatever width you would like.
It looks like you already have a style="width:35px;" rule on all of these. If you simply wish to ensure this pulls through you can change this to style="max-width:35px !important;" to ensure that this is enforced and overrides the 100% width within the template itself.
These media queries are fed from the "responsive" setting on HubSpot email templates.
There are two way you can amend this:
If you go into your template (click the "settings" tab at the top of your email editor and scroll down to select the "edit template" button. Then select "open in design manager" on the top right of this new pop up). You will see an "action" and then "make basic". This will take away any responsive styles from your template, including this width:100% on your images. However, this may affect other elements of your template so this may require some manual re-styling through css.
You can override the responsive styles for your social icons through the inline styling. If you click on your social sharing icons module you will see the text options box open at the top. If you select "source code" (the icon that looks like this <>) you will see the html behind your social icons. In here you can add in something along the lines of "style="max-width:200px !important" to override the width for this icon. This will have to be added individually for each icon and you can change the 200px to whatever width you would like.
It looks like you already have a style="width:35px;" rule on all of these. If you simply wish to ensure this pulls through you can change this to style="max-width:35px !important;" to ensure that this is enforced and overrides the 100% width within the template itself.
