「タブ」ブロックをモバイル表示のときタブ表示に変更する方法

以下の手順で設定します。

1. 「タブ」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-sp-tabと入力します。

以下のコードをstyle.cssに追加します。

.my-sp-tab {
  .tab-content-group {
    border: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
  }

  .tab-label-group {
    display: none;
  }

  .tab-content {
    border: 3px solid #ccc;
    border-radius: 0;
    display: block;
    width: 100%;
  }

  @media (max-width: 480px) {
    .tab-label-group {
      display: flex;
    }

    .tab-content:not(.is-active) {
      display: none;
    }
  }
}