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 #}
}
}
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.
Did my answer help? Please "mark as a solution" to help others find answers. Plus I really appreciate it!
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 #}
}
}
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!
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.
Did my answer help? Please "mark as a solution" to help others find answers. Plus I really appreciate it!
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.