You styled your Divi site to look just right on desktop…then checked your phone and nearly cried. 😩
If you’ve ever found yourself googling “Divi fonts too big” in a panic, you’re not alone. Huge headlines. Squashed body text. Buttons that could double as billboards. Sound familiar?
You’re not alone, and it’s not your fault. Divi stacks, reshuffles, and scales things differently across devices. If you’re not careful, your beautifully crafted layout turns into a mobile mess, with all your Divi font too big (or too small).
Here’s how to get your fonts under control on smaller screens, without rebuilding everything.
✅ 1. Use Divi’s Device-Specific Settings
Hover over any font size in the Divi Builder, and you’ll see a little phone/tablet/desktop icon. Click that, and you can set different sizes for each device.
📏 Safe starting points:
- Headings (mobile): 1.4–1.8rem (about 22–28px)
- Body text (mobile): 1rem (16px standard)
- Line height: 1.4–1.6 for comfortable reading
You don’t have to guess. Just switch to Mobile View in the builder and adjust while you look.
⚙️ 2. Consider Switching to REM Instead of PX
Pixels are fixed. But rem (root em) units scale based on the user’s default settings. Your text won’t be microscopic for someone with accessibility settings enabled, or massive on a high-res screen.
Rem units make your fonts more flexible and future-proof. A body font of 1rem usually equals 16px, and it scales naturally if you adjust your global settings later.
🔄 3. Reset Rogue Fonts
If your mobile view still looks wonky — like Divi fonts too big or misaligned — it might be a module ignoring your global settings.
Here’s the fix:
- Open the module
- Find the font setting
- Click the reset icon (the little circular arrow)
It will go back to using your global font, so things stay consistent across your site.
🧩 4. Check Your Line Height and Spacing
Sometimes text looks too big just because there’s no breathing space. Or it looks crammed because the line height is too tight.
Mobile screens need more generous line spacing to stay legible. Aim for 1.5ish, and check the padding and margins around the text too.
📱 5. Always Preview in Mobile Mode
You wouldn’t send an email without checking how it reads, right? Same goes for your site. Use Divi’s responsive view toggles at the bottom of the builder (the little screen icons) to preview and tweak before you publish.
You’ll save yourself the “why does it look like THAT on my phone” moment.
💡 Final Thought
You don’t want your Divi fonts too big, but they don’t have to be perfect either. Just readable, consistent, and not shouting on mobile. Start with one section. One heading. One bit of body text that feels off.
Then fix it.
Small tweaks = big clarity. You’ve got this.
