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;
}
}