How can I adjust the letter spacing in the Broadcast theme subheading?

Store Design
, ,

Topic summary

A user working with Shopify’s Broadcast theme needed to adjust letter spacing in subheading text. Multiple solutions were provided involving custom CSS code.

Primary Solution:

  • Add CSS code to the theme.css file (Online Store → Theme → Edit code → Assets → theme.css)
  • Code targets .hero__subheading class with letter-spacing property
  • Separate media queries allow different spacing values for mobile (max-width: 768px) and desktop (min-width: 769px)

Follow-up Issue:
Initially, the code only affected one subheading while the main heading retained normal spacing. Additional CSS targeting elements with [data-aos] attributes was suggested to apply spacing to other subheadings.

Resolution:
The issue was successfully resolved using the updated responsive CSS code that works across different screen sizes. The user confirmed the solution worked perfectly.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

IMG_0642.jpeg
IMG_0642.jpeg1125×2436 262 KB

Hi!

does anyone know if it’s possible to change the letter spacing of the “subheading” text? I’m using broadcast theme.
www.gitana.com.au

2

Hi @Gypsymoon

You can paste below css in theme.css at bottom.

Note: I’ve added letter spacing separately for mobile and desktop. You can arrange whatever you want as per device type.

@media screen and (max-width: 768px){
.hero__subheading.body-size-3 {
	letter-spacing: 2px;
}
}

@media screen and (min-width: 769px){
.hero__subheading.body-size-3 {
	letter-spacing: 2px;
}
}

Thanks

Sheesh B

3

Hi @Gypsymoon ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Note: You can adjust value to fit your store

Beae_Anthony_0-1695843218505.png
Beae_Anthony_0-1695843218505.png767×232 7.06 KB

Best regards,

Anthony

4

Hello @Gypsymoon

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

@media only screen and (max-width: 767px) {
p.hero__subheading.body-size-2.aos-animate {
    letter-spacing: 1px !important;
}
p.hero__subheading.body-size-3.aos-animate {
    letter-spacing: 1px !important;
}
}
5

IMG_0692.jpeg
IMG_0692.jpeg1125×2436 173 KB

Thank you!! That code works but how do I make it so the heading (circled in green) stays normal spacing and only the “subheading” has the spacing?

6

Thank you so much! This code works but how do I get it to also work on this subheading? (Circled in green)

IMG_0691.jpeg
IMG_0691.jpeg1125×2436 262 KB

7

Hello @Gypsymoon

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.aos-initialized [data-aos][data-aos][data-aos-order="1"] {
    letter-spacing: 2px !important;
}
8

Hi @Gypsymoon

You can try updated code and you can set it different for mobile and desktop.

@media screen and (max-width: 768px){
.hero__subheading {
	letter-spacing: 2px !important;
}
}

@media screen and (min-width: 769px){
.hero__subheading {
	letter-spacing: 2px !important;
}
}

Thanks

Sheesh B

9

Thank you so much!! That’s perfect!

1 Like