SpeedyAkron SpeedyAkron - 3 months ago 14
CSS Question

How to have a hidable paragraph in an HTML email template

I'm creating email template with variables in it. The variables will be replaced at run-time with one of two different sets of values as show below. The first set has an extra paragraph in the middle with a link embedded in it. The problem I'm having is getting the second and third paragraphs to have the correct spacing when they are combined. Is there some way to create a bottom margin from p3 to create that space between the second and third paragraphs?

Here is the template I am using.
Template

<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
background-color: #f5f5f5;
}
.body-div{
width: 560px;
background-color: #ffffff;
padding: 10px 20px;
margin: 0 auto;
}
.below-spacing, .p3{
padding-bottom: 20px;
}

.above-spacing{
padding-top: 10px;
}

.p1:empty, .p2:empty, .p3:empty{
display:none;
}
</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">{{FirstParagraph}}</div>
<div><span class= "p1">{{MidParagraphPart1}}</span><a href="https://www.google.com"><span class="p2">{{MidParagraphPart2}}</span></a><span class="p3">{{MidParagraphPart3}}</span></div>
<div>{{LastParagraph}}</div>
</div>
</body>
</html>


Template

Example 1
In this example I've inserted values into all the variables showing all three paragraphs and the link with text in it. Notice how paragraphs two and three do not space correctly in a browser. The CSS is the same as above.

</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1">Section of Text #2, Part #1. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </span><a href="https://www.google.com"><span class="p2">(Part #2) Link text</span></a><span class="p3"> Part #3 Lorem ipsum dolor sit amet, et eget. Lorem ipsum dolor sit amet, et eget.</span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>


Example 1

Example 2
In this example I've replaced only the first and last variables with text. The middle paragraph is hidden and both paragraphs are spaced correctly. The CSS is the same as above.

</style>
<body>
<div class="body-div">
<div class="below-spacing above-spacing">Section of text #1 Lorem ipsum dolor sit amet, dolor porta wisi, sed et dui lacinia facilisi tincidunt hendrerit, risus sodales ipsum semper nulla sit, sed cursus sapiente, aliquam tincidunt sed leo arcu in.</div>
<div><span class= "p1"></span><a href="https://www.google.com"><span class="p2"></span></a><span class="p3"></span></div>
<div>Section of text #3 Lorem ipsum dolor sit amett, at consectetuer id sollicitudin amet posuere. </div>
</div>
</body>
</html>


Example 2

Answer

Try this:

  1. Add this to the end of your css.

    .hidden{
        display: none;
    }
    
  2. Then add the injectable variable Hidden to any element you want to hide on demand.

    <div class="below-spacing {{Hidden}}"><span>{{Paragraph2}}</span><a href="https://www.google.com"><span>{{Paragraph3}}</span></a><span>{{Paragraph4}}</span></div>
    
  3. Inject “hidden” (no double quotes) for the variable {{Hidden}}. That will hide the paragraph with the correct spacing.

  4. You can remove the p1, p2, and p3 classes.

Comments