How to remove padding on mobile for header and footer on responsive emails?

craigarector · ‎10-01-2018

I have working knowledge of html and css — I'm no expert though. So please speak to me like a child! lol

I'm working on an email template. I've removed all default padding in the email settings. I've turned off the padding button for images when selecting an image for the template.

When I view the email for desktop, the header image and footer section are flush to the border.

When I view the email on mobile, there is an added 10px padding around all sides on the header image and footer section.

It looks like a default setting on the template source maybe? But I can only "View template source" and can't edit it.

Is there a way to remove this padding on mobile?

craigarector · ‎10-03-2018

Ok, so I found what was causing the padding.

On the Hubspot default Responsive Template Source (which I can't edit). Under the media query "@media only screen and (max-width: 480px)," there was the following css:

td.columnContent {

padding-top: 10px !important;
padding-right: 10px !important;
padding-bottom: 10px !important;
padding-left: 10px !important;
}

Since I couldn't edit that template source, I added the following css to the "Additional <head> Markup on the email template itself:

@media only screen and (max-width: 480px) {
td.columnContent {
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
}
}

Now this removed all padding, so I had to remove the "Inner Space" padding selections that were used for the desktop version, and then use inline padding styling for each element that needed padding. This made the desired padding consistent across mobile an desktop, while using the css above to remove the unwanted padding on mobile.

Thanks for you help!

jennysowyrda · ‎10-03-2018

Hi @craigarector,

Can you please share a public link to the email you're working on so that we can take a look?

Have you looked at the media queries for the template? In the other discussions around this issue, this was suggested frequently. I also wanted to share a few additional resources regarding mobile email design.

1. How can I optimize emails for mobile devices?

2. Email padding discussion

Thank you,

Jenny

Did my post help answer your query? Help the Community by marking it as a solution

craigarector · ‎10-03-2018

I'll check out those links and let you know it goes.

In the meantime, here's a link to the email preview.

As you can see, when you resize to mobile width, the top banner image will have padding. Are you suggesting that I can just find the media query in the default Hubspot source file (that I am unable to edit), then override by adding a media query to the head of the email itself?

Thanks for you response!

craigarector · ‎10-03-2018