Solved

How Do I Add Responsive Page Margins in Email Builder?

  • 16 November 2020
  • 3 replies
  • 767 views
B
Rank
Userlevel 3
Badge +5
  • Ben
  • Problem Solver I
  • 35 replies

Hi There,

How do we use your email builder to create nice spacing like we see in your own emails?

See attached, notice how on desktop the page margins are nice and wide but on mobile they’re smaller. How do we achieve this using your email builder?

And how do you set these sorts of block spacing styles template-wide (and override as needed)? That way, you don’t have to keep changing the spacing every time you add a block!

I hope that makes sense.

Cheers

Ben

 

 

icon

Best answer by cassy.lee 18 November 2020, 00:39

View original

3 replies

cassy.lee
Userlevel 6
Badge +9

Hi @Ben 

Thanks for being a part of our Community and contributing to your first post. We’re flattered that you think our email spacing is nice! Happy to help provide some thoughts on this: 

When editing your emails, you have the option to switch between Desktop and Mobile in the top right corner (image below): 
 


When you click on a block, you have an the option on the bottom to show the Margin and Padding on Mobile, Desktop, or both (image below)
 

You can pick and choose what design and format you want to customize for Mobile or Desktop view! 
For your second question, you can save blocks so that you can always refer to a particular style. You also recommend creating a base template so that you can always keep the same styles and formats. You can view instructions on how to do this, in this Create a Base Template article. 

 

Hope you found this helpful, Ben! 
-Cass.
 

Doubleo
Rank
Userlevel 2
Badge +5

@cassy.lee I think your response might be a little misleading here, because it sounds like the user can decide how much block margin/padding to display on mobile and desktop independently. Whereas all you can actually do is just show the block on desktop or mobile or both.

Thanks – O₂

cassy.lee
Userlevel 6
Badge +9

Hi @Doubleo, 

Thanks so much for keeping me honest! My apologies if my response was a little misleading, and you’re totally right that the block margin/padding displays are not necessarily independent. To help clarify how mobile margin and padding work:

  • To add margin or padding that will only be visible on desktops, use left/right padding in the Block section of the Block Styles tab for your block. This left/right spacing will disappear on mobile.
  • To add margin or padding that's shown on both desktops and mobile devices, use the Margin options in the Block section of the Block Styles tab for your block.

You can find additional details on this in the article: How to Optimize Your Emails for Mobile

Thanks again for highlighting this, 
-Cass.

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.