SOLVED

Re: Indented bullet points on new responsive templates

Go to solution
Anonymous
Not applicable

Indented bullet points on new responsive templates

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

1 ACCEPTED SOLUTION

Accepted Solutions
Dory_Viscoglio
Level 10

Re: Indented bullet points on new responsive templates

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>

View solution in original post

4 REPLIES 4
Grégoire_Miche2
Level 10

Re: Indented bullet points on new responsive templates

Hi Youcef,

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

-Greg

Dory_Viscoglio
Level 10

Re: Indented bullet points on new responsive templates

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_Grimes
Level 10

Re: Indented bullet points on new responsive templates

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

Anonymous
Not applicable

Re: Indented bullet points on new responsive templates

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.