CSS bottom Property Проблема на маленьком экране

.Newmealpopout {
  position: fixed;
  left: inherit;
  bottom: 56px;
  height: 220px;
  padding: 6px;
  background-color: #9e9e9e;
  color: #333;
}

<div class = "col-xs-3 col-md-2 col-lg-3 mts-padding-all-15 mts-border-right text-center" style = "">
  <span style = "margin-left:-3px; color: black!important;  text-shadow: 0px 0px 0px ;">Meal</span> &nbsp;<a href = "javascript:$(&#39;#pnlmealNew&#39;).slideToggle(&#39;fast&#39;);" onclick = "fntToggleHotelList(event);" class = "meal-toggle tourdetail-ttp mts-hypl mts-text-12"
    data-toggle = "tooltip" title = "" data-original-title = "View Meals"><i class = "fa fa-lg fa-info-circle"></i></a>
  <br>

  <div class = "row">
    <div id = "pnlmealNew" class = "col-xs-3 col-md-2 col-lg-3  Newmealpopout mts-padding-top-10 mts-padding-side-10" style = "display: none;">
    </div>
  </div>