Hi Guys,
I am not sure if I am doing something wrong here. Please see Attached Images for result.
Email looks perfect on Ipad and...
John van Niekerk
Registered User
3 posts
John van Niekerk
Registered User
3 posts
Project File
Scott Swedorski
VP of Software Development
0 posts
I took a look at your project and you have a few issues here that you need to address.
1. You have your default breakpoint (red dot) set way over at 1556px. To the right of that, you have not defined all your styles. It is why it looks good on mobile devices but not desktops.
2. That default breakpoint should be around 600px. This breakpoint is hidden behind the right pane, so to fix that, go to the Layout pane and under the Grid settings, change the Breakpoint to 600
3. Your entire email is just in 2 Rows. You need to break that apart into multiple Rows. I would suggest at least 8 Rows can be used here.
4. You have used containers for a few elements, but you applied no styles to those containers. I would recommend just removing those.
5. You also have added two additional breakpoints, but have applied no styles to them. This is how you make your email responsive.
6. Images that you add to RED also need to be of the same dimensions you want them to appear in your email. Example, the image header_bg.jpg has dimensions of 600x268, but in RED, you have the picture in a Container, and that makes it 579x250. This will cause a problem in the Outlooks as they will display the original image size.
If you adjust all that, I am sure your email will appear much better in all clients.
If you have not had a chance yet, we have two great tutorials that I believe might help you. These two video tutorials are a great way to dive in. Even if the final design isn't what you want for your campaigns, it will teach you how the controls are used to construct the design. Check them out below:
* Learn RED in 6 Steps: http://www.coffeecup.com/help/articles/a-responsive-email-in-6-steps/
* Watch how we converted a Zappos newsletter: http://www.coffeecup.com/help/articles/convert-a-static-email-to-a-responsive-design/
We also 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.
Plus, our team is always happy to answer any questions you may have. Don't hesitate to reach out.
1. You have your default breakpoint (red dot) set way over at 1556px. To the right of that, you have not defined all your styles. It is why it looks good on mobile devices but not desktops.
2. That default breakpoint should be around 600px. This breakpoint is hidden behind the right pane, so to fix that, go to the Layout pane and under the Grid settings, change the Breakpoint to 600
3. Your entire email is just in 2 Rows. You need to break that apart into multiple Rows. I would suggest at least 8 Rows can be used here.
4. You have used containers for a few elements, but you applied no styles to those containers. I would recommend just removing those.
5. You also have added two additional breakpoints, but have applied no styles to them. This is how you make your email responsive.
6. Images that you add to RED also need to be of the same dimensions you want them to appear in your email. Example, the image header_bg.jpg has dimensions of 600x268, but in RED, you have the picture in a Container, and that makes it 579x250. This will cause a problem in the Outlooks as they will display the original image size.
If you adjust all that, I am sure your email will appear much better in all clients.
If you have not had a chance yet, we have two great tutorials that I believe might help you. These two video tutorials are a great way to dive in. Even if the final design isn't what you want for your campaigns, it will teach you how the controls are used to construct the design. Check them out below:
* Learn RED in 6 Steps: http://www.coffeecup.com/help/articles/a-responsive-email-in-6-steps/
* Watch how we converted a Zappos newsletter: http://www.coffeecup.com/help/articles/convert-a-static-email-to-a-responsive-design/
We also 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.
Plus, our team is always happy to answer any questions you may have. Don't hesitate to reach out.
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.
John van Niekerk
Registered User
3 posts
Awesome thanks Scott!
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.
