Right Side Drawer Component and media-breakpoint-down(sm) not working

[vhochsteinTef]

Hi,

I've got a right side drawer component, which slides into view from right side for specific tasks.

That drawer is using position:fixed to get that slide in out stuff up and running.
The drawer view is limited in width (does not span the whole width of the browser window)
Actually it s similar to the mobile view which I am defining using include media-breakpoint-down(sm) in my sass.

However it does not work for my drawer, mobile styles are not applied.

I know it s a quite specific question, but any hint would be greatly appreciated.

--

volker

[MukeshYadav_]

Hi @vhochsteinTef ,

Could you please add more about the question/ask. Also can you add the css you are using?

Is right side drawer a custom component create in AEM?

There might be following reason

1.Re-verify if the target element in css is correctly specified(

@media (max-width: 576px) { // or your defined breakpoint
  .drawer {
    width: 80%; // Set width appropriate for mobile
    right: 0; // Ensure it's positioned off-screen initially
  }
}

2. Or cross check if any JS is overiding the css

const toggleDrawer = () => {
  const drawer = document.querySelector('.drawer');
  drawer.classList.toggle('open'); // This class should have styles for visibility
};

3.Can you try !important to the css property for mobile view

.selector {
  property: value !important;
}

Thanks

[Megha_kumari]

Hi @vhochsteinTef ,

It sounds like your media query is not being applied to the right-side drawer, even though it works in other cases. Here are some possible reasons and solutions:

Possible Solutions:

1. Check if the Media Query is Being Compiled

   • Ensure your SASS sm breakpoint is correctly defined. If using Bootstrap defaults:
     $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px );
   • If you suspect SASS isn't compiling the media query properly, inspect the final CSS (style.css) to confirm the query exists.

2. Increase Selector Specificity

   • If another rule is overriding your mobile styles, try making the selector more specific:
     @include media-breakpoint-down(sm) { body .drawer { width: 100%; } }

3. Force Styles Using !important

   • Since position: fixed elements can sometimes ignore inherited styles, try:
     @include media-breakpoint-down(sm) { .drawer { width: 100% !important; max-width: none !important; } }

4. Test with a Basic CSS Media Query

   • If using SASS doesn’t work, try a plain CSS media query to check if the issue is with SASS compilation:
     @media (max-width: 576px) { .drawer { width: 100%; } }

5. Ensure the Parent Element Isn’t Clipping the Drawer

   • If the drawer is inside a container with overflow: hidden, it might be preventing style changes.
     body { overflow: visible !important; }
     Thanks!

[kautuk_sahni]

@vhochsteinTef Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you !