Angular 11 mat-menu is not working on small screens

Question

I'm using angular-mat(v11) menu, the menu is working fine with laptop and iPad screens but in mobile portrait screens it is not working. Below is the code,

This is the HTML Code

 <div class="showOnSmallScreens">
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
            </mat-menu>
        </div>

A different div for displaying on large screens.

CSS Code

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
@media (min-width: 1025px) and (max-width: 1280px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    .addLayer {
        margin-left: 6rem;
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
@media (min-width: 768px) and (max-width: 1024px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
@media (min-width: 481px) and (max-width: 767px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
@media (min-width: 320px) and (max-width: 480px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

@media (min-width: 280px) and (max-width: 319px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

There's a media query for landscape as well, is that any issue?

I'm not sure why it is happening. Any help is much appreciated.

Answer 1

I'm using angular-mat(v11) menu, the menu is working fine with laptop and iPad screens but in mobile portrait screens it is not working. Below is the code,

This is the HTML Code

 <div class="showOnSmallScreens">
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
            </mat-menu>
        </div>

A different div for displaying on large screens.

CSS Code

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
@media (min-width: 1025px) and (max-width: 1280px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    .addLayer {
        margin-left: 6rem;
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
@media (min-width: 768px) and (max-width: 1024px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
@media (min-width: 481px) and (max-width: 767px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
@media (min-width: 320px) and (max-width: 480px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

@media (min-width: 280px) and (max-width: 319px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

There's a media query for landscape as well, is that any issue?

I'm not sure why it is happening. Any help is much appreciated.