How can I display a full-width image on the announcement bar?

Store Design
,
1

Hello everyone,

I would like to display the full width of this image across the whole announcement bar (with plans to insert a gif on the announcement bar later)

I have managed to get the majority of the width displaying properly, but there seems to be a gap on the left of the announcement bar where none of the image shows at all.

.announcement-bar__content {
display: block;
padding: 4px 0;
margin-bottom: 0;
background-image: url(“https://cdn.shopify.com/s/files/1/1779/2423/files/TEST_f3ce2ff1-2ebd-469d-af2c-d16d8c5811bb.png?v=1690378770”);
width: 2000px;
}

.announcement-bar__content–center {
text-align: center;
}

@media screen and (max-width: 640px) {
.announcement-bar__inner {
text-align: center; /* Always centered on mobile no matter the setting */
}
}

@media screen and (min-width: 641px) {
.announcement-bar {
font-size: calc(var(–base-text-font-size) - (var(–default-text-font-size) - 14px));
text-align: left;
}

.announcement-bar__inner {
display: wrap;
align-items: center;
}

Here is an example image of where the gap needs to be filled.

Banner missing left.png
Banner missing left.png1909×279 67.7 KB

Please see the website URL here: https://toptoys2u.co.uk/

Many thanks in advance!

2

Hi @Toptoys2uHS

Thank you for reaching out to the Shopify community.

I checked your website, one thing you can do here is set the padding to 0 of the announcement bar.

Just add below code in your base.css or theme.css file in Assets folder.

.announcement-bar .container{
   padding: 0;
}

Harsita_0-1690459459682.png
Harsita_0-1690459459682.png1347×687 253 KB

Do give it a try and let me know if this was helpful.

Thanks

3

Hello Harsita,

Thank you for your help, however this does not fix the issue as the padding seems to still be there even after adding the code:

.announcement-bar .container{ padding: 0; }

If there is a way to get rid of this area so that the image can display the full length then I would highly appreciate it.

Thank you.

4

Yes @Toptoys2uHS

You can set the padding of the container of announcement bar to zero. Then your image will take the whole width.

.announcement-bar .container{
   padding: 0;
}
5

Hey @Toptoys2uHS

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Moeed_0-1690461353269.png
Moeed_0-1690461353269.png1903×538 234 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
6

Hello Moeed,

Thank you for your help, this seems to have worked now!

Most likely from adding it into theme.liquid!

7

Thank you for your reply. I’m glad to hear that the solution worked well for you. Should you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like and Accept Solution would be greatly appreciated.