Mystery Gap in Gmail

User 448176 Photo


Registered User
5 posts

So after getting my email all dialed in and looking good across all clients, I was ready to send, but figured I'd send out one more test which revealed a gap in under my header in Gmail that wasn't previously showing. Everything is still tight in Outlook (amazingly) and it looks spot on in a browser, but in Gmail this silly gap is showing up and nothing I've tried seems to reign it back in. Screenshot below and I've attached my .red file should it be helpful.

http://i.imgur.com/tYN5sgT.jpg
Attachments:
User 103173 Photo


VP of Software Development
0 posts

The issue here is part of your image is in one row and the other part is in another. That will cause some problems in different clients/services getting things to line up correctly. You should try and avoid slicing things in that manner. A simple fix is to use a Border Radius instead on the second row and remove the top portion off the first. The attach project file includes that feature. You just need to adjust the header image and remove the top portion.

Also, you did add a single breakpoint but did not include any style changes on that breakpoint. To have a responsive email, you need to make use of breakpoints.

If you have not done so yet, we have a bunch of articles on RED to help you get more familiar with how the software works. Our Quick Start Guide is very helpful when getting started with Responsive Email Designer. We recommend taking a look at it as it explains many different parts of RED.

Another great article to read over is How to design a Responsive Email for the Top 10 Email Clients which will help you understand what properties are supported and which are not. :P
Attachments:
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 365060 Photo


Registered User
5 posts

Having just purchased the program, I designed my email and it looked ok on my pc, showing the 2 columns when in full width and one lone column when narrowing the display for a phone, so I sent it to my gmail account, only to find that on my tablet and on my phone, it just shows as the full 2 column display, just smaller, so it can't easily be read - I tried to attach a copy of my .red file but your uploader said that the file was not a .red file, so not much luck there either - Any suggestions?
User 103173 Photo


VP of Software Development
0 posts

Gerry Milner-Walker wrote:
Having just purchased the program, I designed my email and it looked ok on my pc, showing the 2 columns when in full width and one lone column when narrowing the display for a phone, so I sent it to my gmail account, only to find that on my tablet and on my phone, it just shows as the full 2 column display, just smaller, so it can't easily be read - I tried to attach a copy of my .red file but your uploader said that the file was not a .red file, so not much luck there either - Any suggestions?

Zip your project file up and attach it here so we can look at this. Please also include a few screenshots (full desktop view) of what you see so we can compare it with our tests.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 365060 Photo


Registered User
5 posts

Thanks Scott. I am attaching a zip file with the red file plus a screenshot, plus a photo showing it on screen, my tablet and phone (both using gmail).
User 103173 Photo


VP of Software Development
0 posts

I just ran a test on my Gmail account with my iPhone and it shows correctly.

http://s7.postimg.org/bz0k9mth7/image.png

Gmail App
http://s9.postimg.org/eu74ghqtr/android_gmail_app.png

Native Client.
http://s3.postimg.org/lgsc6r0rn/android.png

I don't have my tablet with me, but currently you only have a single breakpoint (636px) which works for the desktop view. You might want to add another for tablets (around 569px mark). That should fix your issue with that device.

If you have not done so yet, we have a bunch of articles on RED to help you get more familiar with how the software works. Our Quick Start Guide is very helpful when getting started with Responsive Email Designer. We recommend taking a look at it as it explains many different parts of RED.

Another great article to read over is How to design a Responsive Email for the Top 10 Email Clients which will help you understand what properties are supported and which are not. :P
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 365060 Photo


Registered User
5 posts

I have put in breakpoints at 344 (for phone) and 501 (for tablet), but the only effect that it has had is to reduce the size of the images, which are now tiny. All still looks ok on design screen. I am using android devices for both phone and tablet, but surely that shouldn't make any difference.
User 103173 Photo


VP of Software Development
0 posts

Gerry Milner-Walker wrote:
I have put in breakpoints at 344 (for phone) and 501 (for tablet), but the only effect that it has had is to reduce the size of the images, which are now tiny. All still looks ok on design screen. I am using android devices for both phone and tablet, but surely that shouldn't make any difference.

Not all versions of Android support responsive emails natively. You have to be on 4.4.4 or higher if I remember correctly. All versions of iOS will work fine though. Have you tried the Gmail app ?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 365060 Photo


Registered User
5 posts

Its a pity your documentation didn't mention this small point before taking my money!
User 103173 Photo


VP of Software Development
0 posts

Gerry Milner-Walker wrote:
Its a pity your documentation didn't mention this small point before taking my money!

Did you download the trial version Gerry? We offer a fully functional 7 day trial that allows you to test all aspects of the software before purchase.

As much as we wish we could fix the pitfalls of older Android operating systems, our hands are tied by what they support. At least you know by upgrading to 4.4 or higher the issue is fixed. As you can see, your email is still fully functional though on the older OS.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.