Pakete werden standardmäßig in einem Karussell angezeigt. Wenn du sie stattdessen als Standard-Preiskarten in einem Raster neben deinen anderen Preisen anzeigen möchtest, kannst du das mit individuellem CSS ändern.
Vorher:
Nachher:
1. Öffne den Bereich „Individuelles CSS“
Den CSS-Bereich findest du unter Einstellungen > Widgets > Individuelles CSS. Wenn du diesen Bereich noch nicht genutzt hast, lies dir So passt du ein bsport-Widget mit individuellem CSS an durch.
2. Wähle den Tab „Allgemein“
Wir empfehlen, den Tab Allgemein zu verwenden.
3. Füge das CSS ein
Füge die folgenden Regeln in deinen Bereich für individuelles CSS ein:
/* 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;}
⚠️ Wenn die Pakete zuerst erscheinen sollen, füge außerdem diese Regel hinzu:
.bs-pass-page__carousel__container { order: 0;}
4. Speichere deine Änderungen
Denke daran, zu speichern, nachdem du deine individuellen CSS-Regeln hinzugefügt hast. Die Änderungen werden sofort übernommen.
