Back to Community
Home / Community / Theme → Onepress

How to Fix Hero Text Size and Responsiveness Issues in OnePress

39 threads Sep 11, 2025 Theme → Onepress

Content

One of the most common challenges users face with the OnePress theme is controlling the size and responsiveness of the text in the Hero section. Text that looks perfect on a desktop can often appear too large, get cut off, or break awkwardly on mobile devices. This guide will walk you through the most effective solutions to gain control over your Hero text across all screen sizes.

Why Does This Happen?

The OnePress theme is designed to be responsive, meaning it automatically adjusts text and layout for different screens. However, due to the vast variety of screen sizes, text lengths, and font choices, the default scaling doesn't always produce the desired result. Long words or large font sizes on desktop can easily overflow or be truncated on narrower mobile screens.

Common Solutions

1. Using Custom CSS for Mobile Text Sizing

The most reliable method to fix text size on mobile is to use custom CSS media queries. This allows you to explicitly set a smaller font size that will only apply to devices with screens below a certain width.

To implement this:

  1. Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard.
  2. Paste one of the following code snippets, adjusting the font-size values (e.g., 30px, 22px) to your liking:
    • For the large headline text: 
      @media (max-width: 767px) {
    .hero-large-text {
        font-size: 30px !important;
    }
}
    • For the smaller sub-text: 
      @media (max-width: 767px) {
    .hero-small-text {
        font-size: 15px !important;
    }
}
  3. Click Publish to save your changes.

2. Ensuring Full Responsiveness for Custom Font Sizes

If you have already changed the font size for desktop but noticed it's no longer responsive, you need to add complementary mobile styles. A comprehensive solution involves defining sizes for multiple screen breakpoints.

Example CSS for full control:

/* Default size for desktop */
.hero-large-text {
    font-size: 3em !important;
}

/* Size for tablets */
@media screen and (max-width: 767px) {
    .hero-large-text {
        font-size: 2em !important;
    }
}

/* Size for mobile phones */
@media screen and (max-width: 479px) {
    .hero-large-text {
        font-size: 1.5em !important;
    }
}

Additional Tips

  • Clear Your Cache: After making any CSS changes, always clear your browser's cache and any caching plugins on your site to see the changes immediately.
  • Test Thoroughly: Use your browser's developer tools to simulate different mobile devices and ensure your text looks correct on all screen sizes.
  • Be Specific: Using !important in your CSS rules helps ensure your custom styles override any default theme styles.

By using these targeted CSS solutions, you can effectively solve the most common Hero text sizing and responsiveness issues in the OnePress theme, creating a better experience for your mobile visitors.

Related Support Threads Support