I hope this is simple and I’m just missing something.
I was designing my email in Desktop mode first. Loving the Klaviyo design interface.
Then I went over to the mobile view and started making changes. At some point I glanced back to Desktop mode, and everything was all screwed up. Surely there is something I’m doing wrong, as I am hoping that I can use these tools to make desktop and mobile version look gorgeous without conflicting with one another…
And since I can’t seem to figure out how to remove my question, I wish to say that I think I found the answer after I found this wonderful post below:
Hello
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:
-
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.
-
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.
-
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.
-
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.
-
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!
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?
Reply
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.