Hi,
Wondering if anybody can help me?
I have started using the new responsive LP templates that Marketo released but have noticed that when using bullet points on these templates the bullet points seem to be on the outside of the paragraph.
Has anyone else encountered this problem and if so, how did you fix it?
Thanks
Solved! Go to Solution.
Hi Youcef, we had similar issues and use the following HTML to override. Not sure if it will work with your CSS but it's worth a shot!
<table style="width: 515px; font-family: Verdana, sans-serif; font-size: 15px; color: #333333; line-height: 22px;" cellspacing="0" cellpadding="0" width="515">
<tbody>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #1</td>
</tr>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #2<br /></td>
</tr>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #3</td>
</tr>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #4<br /></td>
</tr>
</tbody>
</table>
Hi Youcef,
This means the CSS in your template produce this. You will need a CSS developer to fix them.
-Greg
Hi Youcef, we had similar issues and use the following HTML to override. Not sure if it will work with your CSS but it's worth a shot!
<table style="width: 515px; font-family: Verdana, sans-serif; font-size: 15px; color: #333333; line-height: 22px;" cellspacing="0" cellpadding="0" width="515">
<tbody>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #1</td>
</tr>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #2<br /></td>
</tr>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #3</td>
</tr>
<tr>
<td style="width: 20px; padding: 0 0 10px;" width="20">•</td>
<td>Bullet #4<br /></td>
</tr>
</tbody>
</table>
While I like using Dory's solution when working with emails, it's quite a bit of overkill for an LP. You basically just need to add
li {list-style-position: inside;}
to your CSS to have it adjust. If you need to fuss with the exact spacing on the indention, bear in mind that, for reasons that really escape me, certain browsers render padding for indentation and others render it with margin, so you need to define both for cross-browser compatibility.
- Courtney
Thanks for the help, I took elements from both solutions and just added padding to the rich text within the landing page where the bullet points were. This was the easiest thing to do without disrupting everything else on the landing page.