Widget:Mainpageresponsive

<style>

 @media (max-width: 900px) {
   .homepage-content {
     flex-direction: column !important;
   }

   .menu-col,
   .side-col {
     min-width: 100% !important;
     width: 100% !important;
     flex: 1 1 100% !important;
   }
 }

 @supports (container-type: inline-size) {
   .homepage-content {
     container-type: inline-size;
     container-name: mainpage;
   }

   @container mainpage (max-width: 900px) {
     .homepage-content {
       flex-direction: column !important;
     }

     .menu-col,
     .side-col {
       width: 100% !important;
       min-width: 100% !important;
       flex: 1 1 100% !important;
     }
   }
 }

</style> <script>

 (function () {
   function checkCollapseLayout() {
     const content = document.querySelector('.homepage-content');
     const menuCol = document.querySelector('.menu-col');
     const sideCol = document.querySelector('.side-col');
     if (!content || !menuCol || !sideCol) return;

     const shouldCollapse = content.offsetWidth <= 900;

     content.style.flexDirection = shouldCollapse ? 'column' : ;
     [menuCol, sideCol].forEach(el => {
       el.style.minWidth = shouldCollapse ? '100%' : ;
       el.style.width = shouldCollapse ? '100%' : ;
       el.style.flex = shouldCollapse ? '1 1 100%' : ;
     });
   }

   window.addEventListener('resize', checkCollapseLayout);
   document.addEventListener('DOMContentLoaded', checkCollapseLayout);
 })();

</script>