By default, packs are displayed in a carousel. If you would prefer them to appear as standard pricing cards, in a grid alongside the rest of your pricing, you can change this with custom CSS.
From this:
To this:
1. Go to the Custom CSS section
You will find the CSS section in Settings > Widgets > Custom CSS. If you have not used this area before, see How to customise a bsport widget with custom CSS.
2. Select the Common tab
We recommend using the Common tab.
3. Paste the CSS
Paste the following rules into your custom CSS area:
/* REMOVE CAROUSEL DISPLAY */@media (width < 750px) {
.bs-carousel__item .bs-pack-card {
height: 150px !important;
} .bs-carousel__items__container__view {
gap: 5px;
} .bs-grid-item-justification-space-between {
height: 100%;
} .bs-pack-card__prices-container {
align-items: end;
}
}@container (width < 1100px) {
.bs-carousel__item {
flex-basis: 0px;
} .bs-pass-page__carousel__container {
padding: 0px 10px;
}
}.bs-carousel__indicator__container,
.bs-carousel__navigation__button,
.bs-carousel__navigation__button,
.bs-carousel__indicator__container,
.bs-initial-price__price {
display: none;
}.bs-carousel__items__indicator__container {
overflow: visible;
contain: none;
pointer-events: none;
}.bs-carousel__items__container {
overflow: visible;
contain: none;
}.bs-carousel__items__container__view {
display: flex;
flex-wrap: wrap;
transform: none;
transition: none;
animation: none;
translate: 0;
width: 100%;
will-change: unset;
contain: none;
display: grid;
grid-template-columns: repeat(4, minmax(300px, 1fr));
grid-template-rows: 230px;
gap: 20px;
margin: 0px;
}.bs-carousel__items__container__view[style*="transform"] {
transform: none !important;
}.bs-pack-card__title {
font-size: var(--h6-fontSize);
}@media (width < 1475px) {
.bs-carousel__items__container__view {
grid-template-columns: repeat(3, minmax(300px, 1fr));
}
}@media (width < 1100px) {
.bs-carousel__items__container__view {
grid-template-columns: repeat(2, minmax(300px, 1fr));
}
}@media (width < 750px) {
.bs-carousel__items__container__view {
flex-direction: column;
display: flex;
width: 100%;
} .bs-pack-card {
height: 175px;
}
}.bs-carousel__items__container__view > * {
transform: none;
transition: none;
animation: none;
opacity: 1;
visibility: visible;
display: block;
position: static;
margin-left: 0;
width: auto;
flex-shrink: 0;
}.bs-carousel__item {
position: static;
transform: none;
pointer-events: all;
}@media (max-width: 768px) {
.bs-carousel__item {
width: 100%;
}
}@media (max-width: 480px) {
.bs-carousel__item {
width: 100%;
}
}.hidden-item-right,
.hidden-item-left {
translate: none;
flex-basis: 0px;
translate: 0;
}[id*=bsport-widget] .cleanslate .hidden-item-right,
[id*=bsport-widget] .cleanslate .hidden-item-left {
translate: none;
}.bs-pack-card .bs-generic-card__content {
background: linear-gradient(120deg, var(--color-secondary-background-paper) 50%, var(--color-background-paper) 50%);
border-radius: var(--border-radius-4);
}.bs-pass-page__carousel__container,
.bs-carousel__container,
.bs-carousel__items__container,
.bs-carousel__items__container__view,
.bs-carousel__item {
pointer-events: none;
}.bs-pack-card__footer > button,
.bs-button__container {
pointer-events: all;
}/* Reduce height of packs */
.bs-pack-card__description {
-webkit-line-clamp: 2;
}.bs-carousel__item .bs-pack-card {
height: 230px;
}.bs-calendar-search__container,
.bs-search__container {
margin-bottom: 0;
}@media (width < 750px) {
.bs-carousel__item {
height: 160px;
} .bs-pack-card__list {
display: grid;
grid-template-columns: 1fr 1fr;
} .bs-carousel__item .bs-pack-card {
height: 175px;
} .bs-carousel__items__indicator__container {
padding: 0px 10px;
}
}.bs-pass-page {
display: grid;
}.bs-pass-page__carousel__container {
order: 1;
}.bs-pass-page__list__filters__container {
gap: 0px;
}.bs-pack-card__prices-container {
height: 100%;
justify-content: end;
}
⚠️ If you want the packs to appear first, also add this rule:
.bs-pass-page__carousel__container {
order: 0;
}
4. Save your changes
Once you have added your custom CSS rules, remember to save. Changes apply instantly.
