Reduce the font size of the marquee - Dawn theme

Store Design
, , , ,
1

I’m using the Dawn theme in that I want to reduce the font size on the marquee text, please help me to fix this. It’s urgent.

website: https://ambersilverz.com/

image
image424×855 79.9 KB

2

@Sivadarshan please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

.marquee-text-wrapper .marquee__group p{font-size: 10px !important;}
4

Hi! In Dawn the marquee/announcement bar text uses a fixed font size in the CSS, so there isn’t a control in the customizer to change it. You can override the size with a small CSS snippet:

  • Go to Online Store \u2192 Themes \u2192 Edit code and open the base.css (or theme.css) file in the Assets folder.

  • Scroll to the bottom and add this code:

    /* Adjust marquee/scrolling text size */
.marquee__text,
.scrolling-text {
  font-size: 1rem; /* Choose the size you want (e.g. 16px = 1rem) */
  line-height: 1.2;
}
@media screen and (max-width: 749px) {
  .marquee__text,
  .scrolling-text {
    font-size: 0.875rem; /* smaller on mobile */
  }
}

  • Save the file and refresh your store. The marquee text should now display at the smaller font size you specify. You can adjust the font-size values to get the look you want.

If your marquee section is an app or custom block, inspect the HTML for its class names (e.g. .announcement-bar__message) and target those instead. But for the built‑in scrolling text in Dawn this CSS will reduce the size on both desktop and mobile.

5

After further checking, the font size of marquee is small enough. If you need further help still, please edit this topic and make some update here. Thanks~

6

Hi @Sivadarshan

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 749px) {
  .announcement-bar__message {
    font-size: 1.2rem !important;
  }
}

Adjust font size as needed.

Thank You!