Email buttons display incorrectly on mobile

SOLVE
Occasional Contributor

In our email newsletter, we have two columns of text (blog posts), each with a button below that relates to the column ("read more"). These display side-by-side on desktop, but on mobile, they stack, and both the buttons are displayed stacked on top of each other, after all the text....Instead of text-then-button, text-then-button.  This makes it confusing to know which one to click for which article.  Anyone experienced this and have a fix for it?  

 

buttons.JPG

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Regular Advisor

It sounds like in your template what you have is this:

 

Row 1: Content 1 | Content 2

Row 2: Content 1 Button | Content 2 Button

 

Resulting in: Content 1, Content 2, Content 1 Button, Content 2 Button

When what you want is: Content 1, Content 1 Button, Content 2, Content 2 Button

 

In this scenario, what you are asking for really isn't possible because in responsive things go from top to bottom, left to right.  This would react the same way with mobile, unless you used CSS code to push/pull blocks based on the resolution.  In order to do what you want, the Content 1 Button has to be in the same content block as Content 1. I think the counter you may be running into, especially with email is that the length may differ.  Unfortunately while there are ways to solve for this on the desktop there is not on email. So the best thing you can do is really stick to restricting copy for your newsletter to a character count to keep things as balanced as possible.  It's not ideal, but email is a tricky beast and unfortunately it requires compromises.  

View solution in original post

2 Replies 2
Solution
Regular Advisor

It sounds like in your template what you have is this:

 

Row 1: Content 1 | Content 2

Row 2: Content 1 Button | Content 2 Button

 

Resulting in: Content 1, Content 2, Content 1 Button, Content 2 Button

When what you want is: Content 1, Content 1 Button, Content 2, Content 2 Button

 

In this scenario, what you are asking for really isn't possible because in responsive things go from top to bottom, left to right.  This would react the same way with mobile, unless you used CSS code to push/pull blocks based on the resolution.  In order to do what you want, the Content 1 Button has to be in the same content block as Content 1. I think the counter you may be running into, especially with email is that the length may differ.  Unfortunately while there are ways to solve for this on the desktop there is not on email. So the best thing you can do is really stick to restricting copy for your newsletter to a character count to keep things as balanced as possible.  It's not ideal, but email is a tricky beast and unfortunately it requires compromises.  

View solution in original post

Occasional Contributor

After a few tries, I was able to drag my buttons up into the same content area as my text. This solved the problem. Thanks!

Reply
0 Upvotes