Email Marketing Tool

SchoMlo
Member

Bullet Indenting Too Much on Mobile

SOLVE

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!

0 Upvotes
2 Accepted solutions
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Bullet Indenting Too Much on Mobile

SOLVE

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

Anton Bujanowski Signature

View solution in original post

danmoyle
Solution
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

Bullet Indenting Too Much on Mobile

SOLVE

+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. 

Did my answer help? Please "mark as a solution" to help others find answers. Plus I really appreciate it!


Dan Moyle

HubSpot Advisor

LearningOps | Impulse Creative

emailAddress
dan@impulsecreative.com
website
https://impulsecreative.com/

View solution in original post

0 Upvotes
4 Replies 4
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Bullet Indenting Too Much on Mobile

SOLVE

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

Anton Bujanowski Signature
SchoMlo
Member

Bullet Indenting Too Much on Mobile

SOLVE

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!

0 Upvotes
danmoyle
Solution
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

Bullet Indenting Too Much on Mobile

SOLVE

+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. 

Did my answer help? Please "mark as a solution" to help others find answers. Plus I really appreciate it!


Dan Moyle

HubSpot Advisor

LearningOps | Impulse Creative

emailAddress
dan@impulsecreative.com
website
https://impulsecreative.com/
0 Upvotes
PamCotton
Community Manager
Community Manager

Bullet Indenting Too Much on Mobile

SOLVE

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

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes