Designing an Email for Desktop and Mobile -- I must be missing something.

Hello ​@DaveinLA , Glad that you have been able to get that right…….

It sounds like you  were experiencing styling conflicts between mobile and desktop views in Klaviyo. Klaviyo's email editor doesn't allow completely separate designs for desktop and mobile, but rather, it adapts the same design responsively. Here’s what might be happening and how to fix it:

Possible Reasons & Fixes:

1. Editing Elements Instead of Mobile-Specific Settings

   • If you adjust text size, padding, or alignment without using mobile-specific controls, changes affect both views.
   • Fix: Use the "Mobile" tab under text settings to adjust font size, padding, or alignment specifically for mobile.

2. Columns Collapsing on Mobile

   • Klaviyo automatically stacks columns on mobile. If your layout is breaking, this could be the issue.
   • Fix: Use the "Stack on Mobile" toggle in the section settings. Try disabling it if needed.

3. Custom Padding/Margins Not Adapting Well

   • Padding and margins might be too large on one view and break the layout on another.
   • Fix: Use percentage-based padding where possible or adjust the settings separately in mobile view.

4. Background Images or Content Overflowing

   • Some background images might not scale well.
   • Fix: Ensure the image is set to "cover" rather than "contain" in background settings.

5. Custom Code Interference

   • If you’ve added custom HTML/CSS, it could be affecting responsiveness.
   • Fix: Test by temporarily removing custom code and checking if the issue persists.

A best practice is to make most of your layout changes in desktop mode first, then fine-tune for mobile using Klaviyo’s built-in mobile settings. Let me know if any of these apply to your case!

​@MANSIR2094 Thanks for your response! I had a few more things to figure out but finally got things looking fine for mobile and desktop coming out of Klaviyo. My client unfortunately uses Klaviyo only for their B2C side, and uses Pardot for their B2B. I was hoping that the HTML export would work in Pardot just fine, but it was too good to be true.

You wouldn’t happen to know of a good sample html source template for responsive text over image that behaves differently depending on whether the person is using desktop or mobile would you? 😉

​@DaveinLA, Thanks for the update! I understand the challenge with Pardot’s HTML handling. For responsive text-over-image, one good approach is using a combination of CSS media queries and background images in a container. I can share a sample HTML structure that works well across devices. Let me know if you'd like it customized for your exact use case!