Indented bullet points on new responsive templates | Community
Skip to main content
A
Anonymous
October 23, 2015
Solved

Indented bullet points on new responsive templates

  • October 23, 2015
  • 3 replies
  • 3003 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dory_Viscoglio

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">&bull;</td>

<td>Bullet #1</td>

</tr>

<tr>

<td style="width: 20px; padding: 0 0 10px;" width="20">&bull;</td>

<td>Bullet #2<br /></td>

</tr>

<tr>

<td style="width: 20px; padding: 0 0 10px;" width="20">&bull;</td>

<td>Bullet #3</td>

</tr>

<tr>

<td style="width: 20px; padding: 0 0 10px;" width="20">&bull;</td>

<td>Bullet #4<br /></td>

</tr>

</tbody>

</table>

3 replies

A
Anonymous
November 4, 2015

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.

Dory_Viscoglio
Dory_ViscoglioAccepted solution
New Participant
October 23, 2015

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">&bull;</td>

<td>Bullet #1</td>

</tr>

<tr>

<td style="width: 20px; padding: 0 0 10px;" width="20">&bull;</td>

<td>Bullet #2<br /></td>

</tr>

<tr>

<td style="width: 20px; padding: 0 0 10px;" width="20">&bull;</td>

<td>Bullet #3</td>

</tr>

<tr>

<td style="width: 20px; padding: 0 0 10px;" width="20">&bull;</td>

<td>Bullet #4<br /></td>

</tr>

</tbody>

</table>

Casey_Grimes2
Casey_Grimes2
New Participant
October 23, 2015

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

DemandLab​

Grégoire_Miche2
Grégoire_Miche2
New Participant
October 23, 2015

Hi Youcef,

This means the CSS in your template produce this. You will need a CSS developer to fix them.

-Greg

Terms & ConditionsAccessibility statement

Loading footer...