alignment and stretching issues on Gmail mobile - pls help

Hey guys,

I am building a email to promote webinars, but this is not important. What is important that there are a couple of coding issues I can't seem to fix.
I need to tell you though that I am not an designer, just an email marketer who is trying to do the designer job also. I mainly try to repurpose existing stable templates to fit my needs instead of completely writing my own. Of course I can screw things up easily.

The email in question is actually based on one of Litmus' email template but I made some modifications.

Here is the code: http://snipsave.com/user/profile/balintsipos#10295

The problem I have is on mobile gmail and there are several parts of it. I'll attach screenshots so you see the problem.

Problem on the top:
The header doesn't strech all the way and it is aligned to the left for some reason.
Also the calendar that was created via HTML is getting squished
http://prntscr.com/6730n8

Problem on the bottom:
The social media icons have pretty much the same issue I think than the header.
And I think the section with the button could have the same thing. It's left aligned and doesn't strech to 100%.
http://prntscr.com/67313w

Are there any other obvious mistakes?
Can you please help me fix these issues?

I don't think they are too difficult to fix, especially for someone properly trained in the HTML arts :)

Any comments/help are massively appreciated.

Best,
Balint

Mercer, 1 year ago

Hey Balint,

This is a great question! The first thing that I would note is that you do have some stylings on the logo image to left-align. You can see this in the "text-align: left" here: http://cm.d.pr/y4jA/3YbBZ7bd. Contrary to what it might seem, text-align also serves to align all inline elements. You also have quite a few "!important"s in here which serve to override the original code of the template. This may have something to do with the way the icons are appearing as those increase potential that there is some overly generalized CSS somewhere there. Generally, I would recommend trying to use "!important" as little as possible to keep the code clean.

I pulled the code from the page that you listed and tested it in a blank webpage. It looks like it should be fully responsive, so I'm curious if it may have to do with the device width of your phone not being detected properly. Would you mind me asking if this issue is also happening on Apple or Windows Devices? It looks like you're using an Android.

Thanks!

sbi85, 1 year ago
Mercer :

Hey Balint,

This is a great question! The first thing that I would note is that you do have some stylings on the logo image to left-align. You can see this in the "text-align: left" here: http://cm.d.pr/y4jA/3YbBZ7bd. Contrary to what it might seem, text-align also serves to align all inline elements. You also have quite a few "!important"s in here which serve to override the original code of the template. This may have something to do with the way the icons are appearing as those increase potential that there is some overly generalized CSS somewhere there. Generally, I would recommend trying to use "!important" as little as possible to keep the code clean.

I pulled the code from the page that you listed and tested it in a blank webpage. It looks like it should be fully responsive, so I'm curious if it may have to do with the device width of your phone not being detected properly. Would you mind me asking if this issue is also happening on Apple or Windows Devices? It looks like you're using an Android.

Thanks!

Hey Mercer,

thanks for the reply.

I have tested removing the text align from the logo CSS but unfortunately it did not make any difference.
I'm using a Nexus 5 to test the email so yeah it's an android.
I have tested it on an iPhone and this does not happen so you might be correct with your assumption. But I have no clue what I can actually do about it. :S

About the !importants I am not sure. I am pretty much using a tried and tested template and added very minimal CSS on my own. I generally fear making too many changes without a proper and deep knowledge of coding.

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