Social images displaying full width on mobile

SOLVE
Lucy_R
Member

Hi there

 

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?

 

@media screen and (max-width: 650px)
img {
  1. width: 100% !important;
  2. height: auto !important;

Here's the link to my email in hubspot so hubspot devs can see: https://app.hubspot.com/email/2047838/edit-beta/4780219328

 

Thanks

0 Upvotes
1 Accepted solution

Accepted Solutions
Tom
Solution
HubSpot Product Team
HubSpot Product Team

Hi @Lucy_R

 

These media queries are fed from the "responsive" setting on HubSpot email templates. 

There are two way you can amend this:

 

  1. 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. 
  2. 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. 

 

I hope this helps! 

View solution in original post

1 Reply 1
Tom
Solution
HubSpot Product Team
HubSpot Product Team

Hi @Lucy_R

 

These media queries are fed from the "responsive" setting on HubSpot email templates. 

There are two way you can amend this:

 

  1. 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. 
  2. 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. 

 

I hope this helps! 

View solution in original post