Email buttons display incorrectly on mobile

[ccbraley]

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?  

[Ben_M · Accepted solution]

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.  

[ccbraley]

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!