Unwanted Extra Space on Mobile and Desktop

Store Design
, , , ,
1

Hello,

So I was trying to make an announcement bar for my website and I wrote a code directly in custom liquid code section. Code runs fine but I am facing an unwanted space issue in desktop and mobile both. I know its because of the code but how can i resolve it?

Heres the code :

/* Scrolling Announcement Bar Styles */ #announcement-bar { color: #FFF; /* Font color (white) */ font-size: 45px; /* Font size */ text-align: center; padding: 20px; /* Increase the padding to provide more space around the text */ margin-top: 20px; /* Increase the top margin to control the vertical spacing between lines */ width: 100%; /* Increase the width to make the background span the full width of the viewport */ position: relative; animation: scroll 15s linear infinite; white-space: nowrap; overflow: hidden; font-family: 'Poppins', sans-serif; /* Use Poppins font with a fallback of a generic sans-serif font */ font-weight: 900; /* Set font weight to 900 (maximum) */ line-height: 1; /* Reduce line height to decrease vertical space between lines */ } @keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
THIS IS TESTING SCROLLING BAR
THIS IS A SECOND LINE
THIS IS A THIRD LINE
2

@Sinanali - can you please share the page link where you have this bar?

3

https://4ac1de-2.myshopify.com/

4

Can the logo be moved up?

5

Issue is not about the logo. Its about announcement bar which is down in the website.

6

@Sinanali - please open this page in customize settings and check this announcement bar section, you have padding top set to 40 and bottom to 52, make it 0 or smaller number and this space will be removed, you should see it like screenshot

suyash1_0-1697172424838.png
suyash1_0-1697172424838.png1366×768 61.9 KB

7

I did padding 0 and it did worked but again in mobile the text is cutting out.

8

@Sinanali - because you have font size 45px, you will need to reduce it to 22px or less for mobile view

@media screen and (max-width:749px)
{
#announcement-bar{font-size: 22px !important;}
}
9

#announcement-bar {
color: #FFF;
font-size: 45px;
text-align: center;
padding: 20px;
margin-top: 20px;
width: 100%;
position: relative;
animation: scroll 15s linear infinite;
white-space: nowrap;
overflow: hidden;
font-family: ‘Poppins’, sans-serif;
font-weight: 900;
line-height: 1;
display: flex; /* Use flexbox to control vertical alignment /
flex-direction: column; / Stack lines vertically /
align-items: center; / Center text horizontally */
}

@keyframes scroll {
0% { transform: translateY(100%); }
100% { transform: translateY(-100%); }
}

Her is updated code remove space

Create back up before applying

10

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media(max-width:767px)
{
   #announcement-bar{
       font-size: 22px !important;
   }
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly