Reduce size of header/announcement bar

[juexle]

Hi, 

Could someone help me with reducing the size of this block where my gradient coloured announcement bar is?

[neeravmakwana]

Hi,

Can you please find this code block in timber.scss.liquid and reduce the first number after padding:

.announcement-bar__message {
  display: block;
  font-weight: $headerFontWeight;
  padding: 10px $gutter;
  margin: 0;
}

Try making that number smaller. 

[juexle]

 Not working, this is what it changes my page to.

My theme.scss.liquid looks like this:

.site-header__upper .small--text-center {
text-align: right !important;
padding-right: 9% !important;

}
#SiteNavParent {
text-align: center !important;
padding-left: 22%!important;
}
.announcement-bar__message {
padding: 0px 0 !important;
font-size: 10px !important;

}

@media (max-width: 767px){
.announcement-bar__message {
font-size: 5px !important;

}
}
.site-header, .site-header__mobile-nav, .announcement-bar {
background-image: linear-gradient(to right, #f6e6b4, #f8d0a7, #f3bcba, #eec0c6, #e9c5d7, #e4c9e7, #decfec, #d8dcf7, #d5e0f9, #d1eaf6, #d0f1ee);

}
.announcement--text.font--accent { padding: 0; }

#NotificationPromo .notification__close{ display:none;}

/* -- code to remove border below navigation -- */
.site-header { border-bottom: none; }
/* - end - */

I'm also using the Venture theme.

[neeravmakwana]

That's strange. Is that the only change you made?

Also, what happens if you change the 0 padding to something like 5px?

[juexle]

Nothing changes when I reduce the padding. I could delete the entire code I added if I was able to make the gradient announcement bar Smaller

[neeravmakwana]

Would you be able to give me development access to your store? In case you do, please reverse the changes so that the announcement bar is exactly like it was in your first page. Thanks.

[juexle]

I've revert the changes I just made to the previous page. My collaboration code is 9482