1개월 만에 회원 1,000명에 근접했지만, 하나만 부족해요!

지원
2

지금 사이트를 보면 세 개의 열이 반응형으로 설정되어 있습니다.

다만, 모바일을 제외하고 창을 좁혔을 때 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;
  }
}