Hi @MayaBrandUp.
Welcome to the Community! We are so happy you’re here!
Would love to help with this, sorry you're experiencing these display issues! Do you mind sharing one what specific email client or clients, you are using when you see these display issues? I would consider using tools for email preview services like Litmus or Email on Acid. These services help you see what your emails would look like on different platforms. For instance, certain email providers, such as Outlook, will display emails differently than they would in all other email clients. Unfortunately, this is an industry-wise issue with Outlook.
Additionally, these issues could stem from the particular client/device you're viewing not supporting media queries, meaning it won’t be able to tell which block to display in your email.
However, we’ll be able to know more of what’s going on here when we identify the provider you’re using when seeing these display issues.
Thank for being a part of our Community!
-Taylor
Thanks Taylor for your help! I will try your advice using Litmus or Email Acid for preview.
Anyways, the display issues i had with Gmail.com and Web.de
Hope you can help me with that!
Hi @MayaBrandUp,
Thanks for that additional info! This was needed info to pinpoint the issue here.
If you can ensure you have mobile optimization turned on and there is no external inline code in your blocks, this can be done by navigating into the source code of your bocks, then it would seem that this an issue of Google Chrome Browser Version not supporting media queries. Media queries are CSS statements that render content in mobile screen sizes, so it tells mobile only/desktop only to show at the appropriate screen size.
I checked these 3 resources and it looks like this environment (Web version Gmail) does not render media queries, since this environment does not render media queries, it cannot tell the desktop only content not to show:
So, unfortunately this cannot be controlled in Klaviyo it is dependent on the email client. All of the listed environments that do render media queries will show the correct blocks.
Additionally, it appears your first message is experiencing Gmail Clipping. To avoid clipping, the template will have to become smaller.
Thank you for your participation in the Community!
-Taylor
Now i reduced the size of my Mail to 36KB all Elements are now for desktop and mobile and the mail is still clipped. I still don’t understand why that continues to happen as i reduced the size of the Mail to a minimum (only Header, Footer and some Text).
Any help for this problem please?
Hey @MayaBrandUp,
I found this article externally that could explain why you messages are being clipped and how to avoid it.
Templates with over 75 KB of HTML can be clipped by Gmail.
Some techniques for to avoid clipping include, using 'desktop & mobile' blocks rather than one for desktop one for mobile, using just 1 product block, limiting how many header and table blocks are used, using the 'paste as plain text' button when pasting content from another source to remove any inline styles, and ensuring your images are under 5 MB, around 600px wide and compressed properly (more information on image size can be found here).
If your issue seems to persist after checking all documentation, please show us screenshot previews of what it looks like when sending to a test email and previewing it within Klaviyo’s editor. Thank you!
Alex
