How can I remove extra padding from my marquee?

Store Design

Topic summary

A user seeks to reduce excessive padding on a marquee element on their Shopify store (hypestockexchange.in).

Solutions Provided:

Two community members offered CSS-based fixes:

  • Option 1: Add custom CSS in theme.liquid before the </body> tag, targeting .custom-marquee with height: 32px !important and a media query for screens with max-width 749px.

  • Option 2: Insert CSS code at the bottom of theme.scss (or theme.scss.liquid) file, setting .custom-marquee height to 30px !important.

Both solutions use the !important flag to override existing styles and reduce the marquee’s vertical space. Screenshots were included showing the implementation steps and expected results.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

I want to remove extra padding of my marquee

URL hypestockexchange.in

IMG_20240110_003723.jpg
IMG_20240110_003723.jpg1080×2400 319 KB

2

Hello @Emiway

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:749px){ .custom-marquee { height: 32px !important; } }

techlyser_web_0-1704828174803.png
techlyser_web_0-1704828174803.png193×255 58.4 KB

3

Hello @Emiway :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file theme.scss (or theme.scss.liquid) and add this code at the bottom

.custom-marquee {
    height: 30px !important;
}

The result

Screenshot 2024-01-10 at 08.53.21.png
Screenshot 2024-01-10 at 08.53.21.png1110×194 26.9 KB

Hope that helps!