Make announcement bar arrows slightly smaller, and more narrow

[ads18922]

Hello, i would like to make my announcement bar arrows slightly smaller, and more narrow on mobile only:

my store is z99nxa-bq.myshopify.com , password is rtiech - horizon theme

[devcoders]

Hi @ads18922

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottow of the file:

@media screen and (max-width: 749px) {
  announcement-bar-component.announcement-bar__slider .icon-caret svg {
    width: 10px;
    height: 10px;
  }
}

[ads18922]

that’s great thank you, could you also provide me some code to make the arrows more narrow, so they aren’t positioned as wide? Thanks

[devcoders]

Hi @ads18922

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottow of the file:

@media screen and (max-width: 749px) {
  announcement-bar-component.announcement-bar__slider .icon-caret svg {
    width: 10px;
    height: 10px;
  }
.announcement-bar__slider .slideshow-control {
    margin: 0 15px;
}
}