Hey guys, I'm having a real head-scratcher here. I've created a dropdown menu using Bootstrap 4, but I'm having trouble making it responsive for mobile screens. I've tried using media queries to make the dropdown menu occupy 100% width on mobile, but so far no luck. Here's a screenshot of my screen: https://i.sstatic.net/OHNQm.png
The area highlighted in blue is the part I need to cover the entire screen.
Here is the HTML code I'm working with:
<div class="notification-container dropdown">
<button
class="btn notification-button"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fa fa-bell-o"></i>
</button>
<div
class="dropdown-menu dropdown-menu-right notification-container-header"
aria-labelledby="dropdownMenuButton"
>
<!-- Notifications content goes here -->
</div>
</div>
And here is my SCSS code:
p,
a {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
}
/* The rest of your SCSS code goes here */
I'm using Angular 9 for dynamic content. Can anyone lend a hand?