I would like to add spacing between blocks in an email

SOLVE
Highlighted
Regular Contributor

Hello,

 

I would like to build a template with independant blocks for each piece of content, where my background image shows up between the blocks, like the email below. (live version here: http://get.invisionapp.com/matchmaker-matchmaker-make-me-an-app?ecid=ACsprvvKhbkhqQOWz4gY6rVwZHvnuE4... - can't seem to find a way of doing this!

Screenshot 2018-10-25 at 10.31.31.png

 

Thanks!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Contributor

This is a tough one to answer without your code, but this maybe easily solved.

 

Screen Shot 2018-10-25 at 8.51.00 AM.png

The image above shows a simple html structure with 1 css hint (padding). Basically if you remove padding from your content block you then can create another block level element for the 'background-image'. And then another with padding for the text block. Something along these lines could solve for your usecase.

 

Heres a little psuedo to hopefully get my idea across.

<body>

  <content-block style="width: 600px;">

    <img-block style="display: block; height: 200px;">
    </img-block>

    <text-block style="padding: 30px;">

      <h1>Content Title</h1>
      <p>More about the content and such</p>
      <etc…>

    </text-block>

  </content-block>

</body>

 

 

Let me know if this helps or just makes things worse!

2 Replies 2
Regular Contributor

Le me clirify the issue I have to obtain this, I can get a block that's the same color as my background in my email pretty easily, but I think the global padding that I have on my emails always ads a white padding around it 

 

Screenshot 2018-10-25 at 10.40.07.png

Reply
0 Upvotes
Esteemed Contributor

This is a tough one to answer without your code, but this maybe easily solved.

 

Screen Shot 2018-10-25 at 8.51.00 AM.png

The image above shows a simple html structure with 1 css hint (padding). Basically if you remove padding from your content block you then can create another block level element for the 'background-image'. And then another with padding for the text block. Something along these lines could solve for your usecase.

 

Heres a little psuedo to hopefully get my idea across.

<body>

  <content-block style="width: 600px;">

    <img-block style="display: block; height: 200px;">
    </img-block>

    <text-block style="padding: 30px;">

      <h1>Content Title</h1>
      <p>More about the content and such</p>
      <etc…>

    </text-block>

  </content-block>

</body>

 

 

Let me know if this helps or just makes things worse!