حسب ما أراه في موقعك الآن، الأعمدة الثلاثة متجاوبة.
ولكن إذا كنت تريد للأعمدة الثلاثة أن تتقلص في مكانها أثناء تضييق النافذة (باستثناء شاشات الجوال بالطبع)، يمكنك تجربة هذا:
/* حاوية للأعمدة الثلاثة */
#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;
}
}