# vast tabber - need help styling tabs

**URL:** <https://community.hubspot.com/t/vast-tabber-need-help-styling-tabs/16660>\
**Category:** CMS Development\
**Created:** [October 9, 2019, 4:40pm UTC](https://community.hubspot.com/t/vast-tabber-need-help-styling-tabs/16660 "2019-10-09T16:40:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![reddot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/reddot/32/23783_2.png) [@reddot](https://community.hubspot.com/u/reddot)\
**Post date:** [October 9, 2019, 4:40pm UTC](https://community.hubspot.com/t/vast-tabber-need-help-styling-tabs/16660/1 "2019-10-09T16:40:40Z")

</div>

> **[Temperature & Environmental Monitoring for Compliance, Safety & Efficiency |...](https://www.sonicu.com/)**
>
> Discover Sonicu’s wireless temperature and environmental monitoring solutions. Automate compliance, protect assets, and reduce manual workload across healthcare, labs, food service, and more.

Hi - I’d like to style the tabs mid-way down on this page so the active tab is a different color than rest of them. Can anyone suggest a way to accomplish this?

Also it would be nice to be able to make the tabs larger L-R so they are not so close together.

Thanks,

Chris

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [October 9, 2019, 7:17pm UTC](https://community.hubspot.com/t/vast-tabber-need-help-styling-tabs/16660/2 "2019-10-09T19:17:26Z")

</div>

Hey @reddot

The tabber uses a class called active to label the current tab, so you sould be able to modify the styling with that class.

```auto
.tabber-wrap .tabber-tabs li.active a {
 background-color: red; // change color here
}

```

To make the tabs wider by setting the size of the LI

```auto
@media screen and (min-width:768px) {
.tabber-wrap .tabber-tabs li {
 width: calc(100% / 5);
 text-align: center
 }
}

```

or by changing the padding of the a tag inside the LIs

```auto
@media screen and (min-width:768px) {
 .tabber-wrap .tabber-tabs li a {
 padding-left: 2em;
 padding-right 2em;
 } 
}

```

---

<div class="post-metadata">

**Author:** ![reddot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/reddot/32/23783_2.png) [@reddot](https://community.hubspot.com/u/reddot)\
**Post date:** [October 11, 2019, 1:04pm UTC](https://community.hubspot.com/t/vast-tabber-need-help-styling-tabs/16660/3 "2019-10-11T13:04:38Z")

</div>

Thanks Kevin-C! This got me on the right track.

Appreciate!

Reddot