Solved

Table is rendering incorrectly on mobile

  • 17 December 2021
  • 2 replies
  • 446 views

Badge +4

I need assistance. So, I'm very much interested in Klaviyo and I've taken several courses from the academy.

I decided to recreate an email I got inbox and it worked well, when I sent a preview email, on mobile the table under the Logo looked like this image, but the table in the original email looked much better from the senders. How do I fix this?

 

I want the items on the table evenly spaced out and on one line.

 

icon

Best answer by KIvey 22 December 2021, 06:40

View original

2 replies

Userlevel 7
Badge +60

Hello @KIvey,

Welcome to the Community!

Optimizing your emails for mobile can be tricky for several reasons. One is that with a wide variety of cell phones consumers are using, paired with the wide variety of different inbox providers and apps, emails are rendered differently based on any number of those combinations! For this reason, we suggest self testing your emails via preview sends and/or using tools such as Litmus or Email on Acid to assist in previewing your emails for your desired combination of devices and inbox. 

To resolve your spacing issue, I would suggest playing around and adjusting the padding for your table block to offer it more room on either side. I also noticed that it seems like the links you have built into the block appear to be aligned left rather than centered. 

Some users have also found luck in either adjusting or disabling the mobile-auto-optimization setting for their email. You can find learn more about this setting and how to adjust it from the Optimize Your Emails for Mobile Help Center article. One solution that comes to mind would be disabling the mobile optimization setting and using a header block using the link only options. This method would typically only allow a desktop version of the email to render; however some inbox providers would still force render a mobile version. 

You may also find help on reading up on other user’s experience from the Community. I’ve included some posts below to get you started:

I hope this helps!

David

Badge +4

I did the padding stuff, disabled mobile-auto-Optimisation and nothing worked.

What seemed to work was reducing the items on the table from 4 to 3, it all fit then.

Reply