Why are hyperlinks larger font on mobile?

Store Design
,

Topic summary

Hyperlinks render larger than body text on mobile while desktop appears normal in the Turbo Portland theme. Theme text is set to 18px; custom CSS only makes links bold and doesn’t affect size. Screenshots provided; site shared for testing.

Likely cause: mobile browsers’ readability adjustments combined with the theme’s responsive typography not explicitly setting link sizes.

Proposed fixes:

  • Add a mobile-only CSS media query to reduce link size in paragraphs: set p a to 14px at ≤798px.
  • Alternatively, force links to inherit surrounding text size and spacing, and optionally set a specific mobile size: a { font-size: inherit; line-height: inherit; } with a mobile rule (e.g., 18px at ≤768px).

Additional action: a request was made for the exact page link to inspect.

Notes: screenshots are central to illustrating the discrepancy.

Status: no confirmation from the original poster; issue remains unresolved pending testing of the CSS changes and further details.

Summarized with AI on December 12. AI used: gpt-5.
1

Hyperlinks are a larger font on mobile than the rest of the body text, but works just fine on desktop. There’s some other strange font size discrepancies on mobile, even though all theme settings are set to regular text = 18 px. We have some custom css that makes all links bold, but it doesn’t affect the font size at all when getting rid of it.

Theme is Turbo Portland. I’ve read all the discussion posts and checked code, and simply cannot find what might be causing this! Any direction of where to look or how to fix it would be much appreciated. Here are screenshots, but you can text yourself at holylamborganics.com.

Screenshot 2024-12-09 163506.png
Screenshot 2024-12-09 163506.png375×507 27.3 KB

Screenshot 2024-12-09 163519.png
Screenshot 2024-12-09 163519.png1094×661 77.6 KB

2

Hi @holylamb ,

Please go to Actions > Edit code > Assets > custom.css file and paste this at the bottom of the file:

@media (max-width: 798px) {
    p a {
        font-size: 14px;
    }
}
3

@holylamb can you please share this page link?

4

Hey there! The issue with hyperlinks showing larger font sizes on mobile is likely due to a combination of mobile browser defaults and how the Turbo Portland theme is handling responsive typography. Here’s how to address it:

1. Why This Happens

Mobile browsers like Safari often adjust font sizes for readability, especially for links, which they consider “important text.” If your CSS or theme doesn’t explicitly set the font size for links (a tags), the browser may override it.

2. How to Fix It

Add custom CSS to ensure consistent font sizes across devices:

  • Log in to your Shopify admin and go to Online Store > Themes > Edit Code.

  • Open the theme.css or style.css file in the Assets folder.

  • Add this code:

a {
    font-size: inherit; /* Ensures links match the surrounding text */
    line-height: inherit; /* Keeps spacing consistent */
}

@media (max-width: 768px) {
    a {
        font-size: 18px; /* Explicitly set the mobile size if needed */
    }
}
  • Save your changes and test on mobile.

3. Optional: Easier Fix with EasyEdits

If digging through code isn’t your thing, you could use EasyEdits to visually edit text and link styles across devices. With the app, you can tweak font sizes directly on mobile and preview changes in real-time. Bonus: You can make changes on a free trial and keep them, even if you don’t continue with the app.

Let me know if you’re stuck or need help testing! (By the way, I’m the developer of EasyEdits, so feel free to ask about it. :blush: )