Responsive in the software...

User 2788957 Photo


Guest
1 post

Hello guys, I was just wondering if any of you have got this problem. I create my email, I adjust the breaking points and everything. I preview it on my pc in different resolution widths. Then I send it to my phone, but it loses its responsiveness when I do this. Have any of you encountered this problem, or may think of a possible screw up I may have done?
User 187934 Photo


Senior Advisor
19,039 posts
Online Now

Can you share a link to the email?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2874833 Photo


Registered User
11 posts

I've encountered this as well. It previews fine but then when I export it, that html doesn't work. For example, I have attached two screenshots, both taken at the lowest breakpoint. The one using preview looks correct, however when I export/send, it's all disfigured.

You can download the html from here: https://cl.ly/2p0t0T0u0l37
Attachments:
User 103173 Photo


VP of Software Development
0 posts

Always post your project file so that we can see what you see! Screenshots are so out of context. :)

How are you sending your email? Example- I am opening Outlook, pasting the code, sending the email to myself.
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 2874833 Photo


Registered User
11 posts

Tried to attach the project, but it wouldn't let it even though it's one of the listed allowable attachment types (.red)... Anyways, you can download from here: https://cl.ly/2M0u1z3K210E
User 2874833 Photo


Registered User
11 posts

And I am sending the email using the send feature in RED
User 103173 Photo


VP of Software Development
0 posts

What you need to do here is on your lower breakpoints, adjust the SPANS for your columns to a higher value so that the elements stack. So on the 1st Row, don't use 4 SPANS and 7 SPANS, change those both to 12 SPANS.

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 User 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.
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 2874833 Photo


Registered User
11 posts

Did that fix it in your end? I did that but still getting the same result. Also, on a side note - I have a column (column-30), that even when I set to not display, still displays. Any idea on what's causing that?
User 103173 Photo


VP of Software Development
0 posts

I did not fix anything. That is what you need to do on your end. ;) . Here is a quick and dirty version.

https://www.dropbox.com/s/6m2n78yfj817r … y.RED?dl=0

I was not able to locate any Column named "-30" though. I do see 2 Rows with a Display set of None, and they are not visible for me. I would also suggest that you start using semantic class names though instead things like "column-30". There is not one re-used class name in your entire email. Using good class names allows you to use the same styles on other elements. Another option is to apply styles to the Type.

Another issue is for all your questions, you are using 2 columns with the 2nd column to add a blank space to the next question under it. Only 1 column is needed there. Use a new Row instead to separate them.

That is just one of many other tweaks that could be made here to improve the design. This email project needs a lot of love though as it has a very unusual design setup. I would even recommend starting over as it may take you longer to fix then re-create.
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 2874833 Photo


Registered User
11 posts

I clean up after I have the setup flowing. Column-30 is 3rd column, in the 3rd row. If you go to any of the lower breakpoints, and try to hide it, it doesn't work. I'm not sure why, and couldn't find any info in forums/support docs that explain it.

The blank columns, are place holders. There is some company info that goes in there there, but I removed it in this copy before I uploaded.

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.