In 1 month I'm close to 1,000 members but I'm missing one thing!

As I see your site right now, the three columns are responsive.

But if what you want is for the 3 columns to shrink in place as you narrow the window (except in mobile of course), you could try this:

/* Container to hold the 3 columns */
#main-outlet-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Adjust space between columns if needed */
}

/* Each column */
.sidebar-wrapper,
#main-outlet,
.custom-right-sidebar {
  flex: 1;
  padding: 10px;
  background-color: #f4f4f4; /* Light background for visibility */
  border: 1px solid #ddd; /* Optional border */
  box-sizing: border-box; /* Ensure padding is included in width */
}

@media (max-width: 768px) {
  /* Stack columns on smaller screens */
  #main-outlet-wrapper {
    flex-direction: column;
  }
}

7 Likes