How to make my announcement header one line on mobile view, dawn theme

Store Design

Topic summary

A user is experiencing an issue where their announcement header text wraps into two lines on mobile view in the Dawn theme and wants it to display as a single line.

Proposed Solutions:

Two community members offered CSS-based fixes:

  • Solution 1: Reduce the font size of the announcement bar text by adding CSS to base.css that targets screens with max-width 750px and sets font-size to 0.8rem

  • Solution 2: Modify padding settings by adding CSS to base.css targeting max-width 767px, setting padding to 0 on the utility bar grid element

Implementation Steps:
Both solutions follow the same process:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate the base.css file
  3. Add the provided CSS code at the end of the file
  4. Save changes

The issue remains unresolved as the original poster has not confirmed whether either solution worked.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
2

@Verterra - it is due to font size, you will need to reduce font size of the text, please add this css to the very end of your base.css file and check

@media screen and (max-width: 750px) {
    .announcement-bar__message {
        font-size: 0.8rem;
    }
}
1 Like