Hello everyone, I'm encountering a little issue with my responsive web app. When I resize my browser manually, everything seems to be working fine. However, when I test out the responsive options, I notice that my navbar is only taking up about 90% of the screen width instead of the full 100%. Here's a snippet of my SASS code (which includes mixins):
.co-menu-left {
width:110px;
height: 92%;
position: fixed;
top: 70px;
left:0px;
transition: 0.4s all ease;
z-index: 5;
@include responsive(phone){
width:100vw;
top:0px;
height: 100%;
z-index:1500000;
}
}
When I adjust my browser size for mobile views (600px or less), everything appears as expected:
https://i.sstatic.net/ZJRTC.png
However, when I switch to Galaxy 5 or iPhone 6/7/8 views, I notice an undesirable space on the right side. Here's a screenshot for reference: https://i.sstatic.net/WahM1.jpg
I'm seeking assistance in resolving this issue because I believe my logic is correct but something isn't working as intended. Any help or suggestions would be greatly appreciated.