Make an adjustment to announcement border

[Yen1]

Hi!

I’ve recently made an amendment to reduce the width of the overall page:

}
body {
max-width: 1800px;
margin: 0px auto;
background: #FFFFFF;
}

I could have adjusted for different screen sizes, but it’s really only applicable on large screens where the page-wide images have their dimensions affect the picture.

This has been sufficient, however, I do wish to keep the announcement bar as a page-wide feature, regardless of the maximum width/resolution of the viewing screen.

Is there some quick code that would overwrite the above for just the announcement bar (not the entire header)? I’m presuming this is easier than instead listing every section that the maximum width should apply for..

Many thanks for any suggestions

[suyash1]

@Yen1 - can you please share your page link where you have announcement?

[Yen1]

Hi Suyash,

Sure, the address is www.yenconcept.com

Viewing on a larger monitor, the page is correctly displaying margin on the side, but this also includes the announcement on the top of the page.

[suyash1]

@Yen1 - announcement is part of your body tag, so when you limit the body to 1800px, all content is limited to it and hence you see margin even for announcement bar, but if you make body 100% then it will not show margin on sides but will look like this, it is for 2000px width

[ZenoPageBuilder]

Hello @Yen1

You can add this code

.announcement-bar {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

The result

Hope it helps!