mjml html email not displaying as expected on email client - mjml

I just finished coding an html email using mjml, I tested it with Putsmail, all looks fine.
I sent an email to myself to test it again, it's not looking fine, it's displayed as it's on mobile view, I tried editing the code, but nothing is working.
My code is normal, I did not put any custom styles for the breakpoints.
I would really appreciate any help, thank you.
Here's how a part of my email is displayed:
Here's how it should be:

Related

Problems with Pinterest Button - Error The Content-Security-Policy directive 'prefetch-src' is implemented behind a flag which is currently disabled

I am having problems with the Chrome Pinterest Button, as well as with my own Pinterest Button in a site of a client.
When you try to pin an image, that image is not loaded in the pinterest's form. Instead you receive a 404 (Not Found) error, but the image and its url is actually perfectly correct. So there is no reason for that error. Actually, after loading the image in another tab, if you click again in the pinterest button the image then appears in the Pinterest's form.
The buttons have been working with no problem until the site changed to SLL and Php 7.1, but I really think this has nothing to do with the issue.
I have found the following error in the console:
The Content-Security-Policy directive 'prefetch-src' is implemented behind a flag which is currently disabled.
Do you have any idea about how to solve this?
Thanks in advance!
I solved. The problem was that the image what I am referring in the data-pin-media was not included in the post, so Pinterest is not able to get it without breaking the Content-Security-Policy.
So, I added and hide the image in the post, and now everything works as expected.
At any case, I had still a problem with the descriptions in the images to pin in pinterest that were not being taken properly. I solved taking a deep look to the url string and encoding some of the characters in the text that were making to fail the url like: | by %7C, etc..
Thanks,
PS It's just me, or lately no one offer his help answering questions on stackoverflow

Mailchimp - Redirect to thank you page

I am using Mail Chimp and in one of my forms when someone registers via custom form, a message appears at the bottom saying 'Check your email for a confirmation email' or something like that. I would like to have them redirect to a thank you page (the standard one will do) instead of a message just appearing, I have been banging my head against a wall trying to figure this out, but I can't seem to find a way to do this.....any suggestions?
The above answer is very vague and doesn't explain fully the process which is explained here in the Mailchimp docs:
https://kb.mailchimp.com/lists/signup-forms/design-and-host-your-own-thank-you-pages
If you check the 'disable all javascript' option then you'll need to perform your own form validation to avoid the form redirecting to a Mailchimp-hosted version of the form if there are errors. Then, once you have submitted the form, it will redirect to your chosen URL.
When creating an embedded form, be sure to disable javascript. There is a check box for it.

Using AJAX to send an email

I am attempting to make an AJAX contact form with Webscript (http://webscript.io), but I am running into a problem. Without AJAX, the form worked well and the email was delivered. After trying to add AJAX functionality, I stopped receiving emails through the form, yet the AJAX appears to run successfully. Here is a JS Bin with my example code: http://jsbin.com/aqahok/1/edit. I have a feeling the problem doesn't lie in the Webscript (which I believe you cannot view) but in the JS since the form worked without AJAX.
Thank you for taking a look at my problem and feel free to ask me any questions you may have.
Your JavaScript is looking for input[name="message"], but it should be looking for textarea[name="message"]. I changed that and tried to send an email. It appears to have worked (no error), so hopefully that's it.
The JS Bin you created makes webscript.io return 500 Internal Server Error (you can see it in Firebug or Chrome Dev Tools). AJAX part just does not check response and show the "Contact Form Submitted!". So problem is on their side.

How to get FB Like to display message

I have added the FB Like button to a web page using the process described here. The button renders OK, however I expected it to render the Be the first of your friends to like this page message, however it does not. I have played around with the different layout styles, send button and show faces options, and even different browsers (IE8, FF, Chrome) however nothing seems to work. If I want that message to display on the page when the page has not been liked yet, what do I need to do? Is the message something that is only displayed with the iFrame version of the FB API? Thanks in advance!
I must have mis-copied the generated tag the first time around, because I was able to get the message to render after I re-copied it. Also wanted to mention that you have to be logged into FB in order to get the Be the first of your friends to like this page message. If you are not logged in, then a different message will be rendered instead.

EditLive! Rich Text Editor - submitting form via ajax

The project I'm working on is using the Java EditLive! rich text editor. I've been trying to make the EditLive form post via ajax, but am having some problems using IE8. Here are the steps we're taking:
Load the main page
The user clicks a link and the EditLive applet is loaded and attached to the page via ajax
The user finishing editing their document and clicks the submit button
The form posts via ajax (we're using jQuery.post())
The EditLive section is reloaded and the EditLive content is correct.
The form immediately posts again
The EditLive content is back to being blank.
Unfortunately (for debugging reasons), this is not happening in FireFox - there is only a single form post and the values are saved correctly.
From what I can tell debugging this in IE8, it looks like the submit event is getting called twice with 2 different forms. My thought is that the applet isn't getting destroyed correctly, though I've tried everything in my power to destroy it.
So I was wondering if anyone has any experience successfully submitting EditLive data via ajax? Or maybe this is just a limitation to the product?
Any help would be greatly appreciated!
I know this is an old issue but you likely want to look at the autoSubmit property of EL:
http://docs.ephox.com/display/EditLive7/AutoSubmit+Property
http://docs.ephox.com/display/EditLive/AutoSubmit+Property
I suspect that by using an AJAXy submit process this is somehow causing you issues with EditLive and its standard behavior. I would try turning off autoSubmit and grabbing the content yourself in your jQuery posting process.

Resources