Right Side Drawer Component and media-breakpoint-down(sm) not working | Community
Skip to main content
V
vhochsteinTef
Level 2
March 7, 2025
Solved

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

  • March 7, 2025
  • 3 replies
  • 644 views

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

Best answer by 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

 

3 replies

MukeshYadav_
Community Advisor
MukeshYadav_Community AdvisorAccepted solution
Community Advisor
March 7, 2025

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

 

    M
    Megha_kumari
    Level 2
    March 10, 2025

    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
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    April 16, 2025

    @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 !

    Kautuk Sahni
    Terms & ConditionsAccessibility statement

    Loading footer...