Responsive drop-down menu with table inside - css

Question

Hi I'm trying to obtain responsive menu on navbar in application on which I work with bootstrap 3. My menu has element with bell icon. The purpose of this one is to remind user some information. Below I show that menu element on screen:
I have fixed settings for width of my menu. I'd like to have responsive menu, not static, because this application should work on few screen resolutions. What should I obtain that? I tried to obtain that by pecrentage property for: width, min-with properties, but it has crashed.
Below I show html tags and CSS settings:
Html:
<li class="dropdown ng-isolate-scope open" loader="remainderLoading"><a ng-show="!loader" id="reminderLink" class="dropdown-toggle" data-toggle="dropdown" style="font-size:18px; cursor:pointer;" ng-click="removeNotification()" aria-expanded="true"><i class="fa fa-bell"></i></a>
<!-- ngIf: numOfRemindedNotes && !loader && !clicked -->
<div id="reminderMenu" class="dropdown-menu">
<div class="form-group col-md-7 disabled">
<label>Reminder's date:</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty ng-valid-date ng-valid-required" ng-change="getNotesByDate()" initdate="new Date()" ng-click="noteDatepicker.opened = true" uib-datepicker-popup="" ng-model="dateNotes.value" is-open="noteDatepicker.opened" ng-required="true" close-text="Close" readonly="" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
</div>
</div>
<div ng-show="noteLoading" class="ng-hide">
<img width="32" height="32" src="/packages/img/loader.gif">
</div>
<div class="col-md-12">
<table id="reminderTable" class="table table-bordered table-striped" ng-show="!noteLoading">
<tbody>
<tr id="reminderTableElement">
<td class="col-md-3">
Case Id
</td>
<td class="col-md-3">
Trans id
</td>
<td class="col-md-3">
Type customer
</td>
<th class="col-md-3">
Note
</th>
<td class="col-md-3">
Date
</td>
<td class="col-md-3"></td>
</tr>
<!-- ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426024</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsadsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426011</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer -->
<!-- ngRepeat: note in notes.notesForAdditionalCustomers -->
</tbody>
</table>
</div>
</div>
</li>
CSS:
#reminderTableElement{
font-size: 12px;
}
#reminderMenu{
min-width: 540px;
}
I would be grateful for help. Best regards ;)

Answer 1

You should use #media tags to implement styles. For example
#media (min-width: 1600px) {
#reminder-menu {
...
}
}
It is considered best practice to design for mobile first, so you would use min-width: 540px or whatever your smallest breakpoint is first, then add more breakpoints as needed.