1ヶ月で1,000人近くになりますが、あと一つ足りません!

現在あなたのサイトを見ていると、3つのカラムはレスポンシブです。

しかし、ウィンドウを狭くしたときに3つのカラムがその場で縮小するようにしたい場合(もちろんモバイル以外)、以下を試すことができます。

/* 3つのカラムを保持するコンテナ */
#main-outlet-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 必要に応じてカラム間のスペースを調整 */
}

/* 各カラム */
.sidebar-wrapper,
#main-outlet,
.custom-right-sidebar {
  flex: 1;
  padding: 10px;
  background-color: #f4f4f4; /* 見やすさのために明るい背景 */
  border: 1px solid #ddd; /* オプションの境界線 */
  box-sizing: border-box; /* パディングが幅に含まれるようにする */
}

@media (max-width: 768px) {
  /* 小さい画面ではカラムを積み重ねる */
  #main-outlet-wrapper {
    flex-direction: column;
  }
}

「いいね!」 7