Bullet Indenting Too Much on Mobile

Marketing & Content Hub Email Marketing Tool
,
1

Hi all,

Is anyone else experiencing the issue where the bullets are indenting too much on mobile? If so, have you found a way to fix it?

We’re needing to re-write copy to not have double level bullets because they come about as 1-2 words.

Thanks!

2

Hey @SchoMlo, thank you for posting in our Community!

I understand how frustrating it can be when bullets indent too much on mobile. This can happen depending on the mobile view or theme you’re using. One potential solution is adjusting the bullet formatting in the HTML or CSS by reducing the margin or padding for lists. Alternatively, simplifying the bullet levels or using dashes instead of bullets might help keep the text from appearing too indented. You could also try different formatting options like numbered lists or reformatting the content for clarity on smaller screens.

To our top experts @Anton, @danmoyle do you have any recommendations for @SchoMlo matter?

Thank you,

Pam

3

Hi @SchoMlo,

bullet identation can be quickly solved by some CSS like this:

{# mobile spacing #}
ul{ {# first level of the bullet list #}
padding-inline-start:16px; {# amount of identation #}
}

ul li > ul { {# second level of the bullet list #}
padding-inline-start:24px; {# amount of identation #}
}

{# desktop spacing #}
@media screen and (min-width:1024px){
ul{ {# first level of the bullet list #}
padding-inline-start:32px; {# amount of identation #}
}

ul li > ul { {# second level of the bullet list #}
padding-inline-start:32px; {# amount of identation #}
}
}

you can go even further like

ul li > ul li > ul

for third level and so on.

hoep this helps

best,

Anton

4

+1 for @Anton’s advice.

The only other thing you can consider, @SchoMlo, is to switch from drag and drop to a completely custom HTML email template. You can create these in your design manager.

Note: Custom coded email templates are only available with Marketing Hub Professional or Enterprise subscriptions. There are some limitations, too. The drag-and-drop editor is designed to be more user-friendly and doesn’t require extensive coding knowledge. Custom coded templates offer more flexibility but may require more maintenance and updates. AndsSome HubSpot features, like personalization tokens, may need to be implemented manually in custom coded templates. But that might get you more control over things like bullet spacing.

5

Thank you so much Anton! We’re still getting our feet wet with HubSpot / drag and drop coming from completely coded templates. With the above recommendation can we use the above for the drag and drop editor?

Sorry for the delay! Really appreciate your quick reply!