title: Responsiveness to Mobile in CSS
body: <p>Im trying to make my bottom sheet responsive to mobile and desktop. you can see in laptop the bottom sheet when you click new topic it works all fine:</p>
  
  <p><a href="https://i.stack.imgur.com/XmYvY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XmYvY.png" alt="enter image description here"></a></p>
  
  <p>But then lets see it in a mobile version(On a regular Iphone 5):</p>
  
  <p><a href="https://i.stack.imgur.com/ma8u4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ma8u4.png" alt="enter image description here"></a></p>
  
  <p>You can see its beyond terrible... My HTML For that view is(Minimized):</p>
  
  <pre><code>&lt;div class="toolbar_new_topic" ng-if="authDataDesc!=null"&gt;
    &lt;md-button id="NEW_TOPIC_BUTTON" ng-click="showNewTopic($event)"&gt;
      &lt;ng-md-icon icon="add_box" style="fill: white" size="20" id="add_icon"&gt;&lt;/ng-md-icon&gt;
      &lt;span id="text_new_topic" color="white"&gt;Create a New Topic&lt;/span&gt;
    &lt;/md-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS Is:</p>
  
  <pre><code>.listdemoListControls md-divider {
      margin-top: 0;
      margin-bottom: 0
  }
  
  .listdemoListControls md-list {
      padding-top: 0
  }
  
  .listdemoListControls md-list-item ._md-list-item-inner&gt;._md-list-item-inner&gt;p,
  .listdemoListControls md-list-item ._md-list-item-inner&gt;p,
  .listdemoListControls md-list-item&gt;._md-list-item-inner&gt;p,
  .listdemoListControls md-list-item&gt;p {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none
  }
  
  body,
  html {
      background: #DDD
  }
  
  #MD-ICON-1 {
      position: relative;
      left: -40px;
      bottom: -23px
  }
  
  .avatar_custom {
      width: 20px;
      height: 20px
  }
  
  .avatar_creator {
      border-radius: 50%;
      position: relative;
      height: 30px;
      top: 10px;
      width: 30px
  }
  
  .toolbar_new_topic {
      display: flex;
      flex-direction: row;
      justify-content: flex-end
  }
  
  #NEW_TOPIC_BUTTON {
      background-color: #81C784;
      font-weight: 700;
      margin-right: 50px
  }
  
  span.views_icon {
      position: relative;
      top: 5px
  }
  
  span.replies_list.md-secondary.ng-binding {
      position: relative;
      left: -55px;
      top: 18px
  }
  
  .user-avatar-wrapper {
      padding: 0;
      margin: 0;
      height: 50px;
      width: 50px;
      border-radius: 50%;
      min-width: 50px;
      display: flex;
      align-items: center
  }
  
  .tags a,
  .tags li {
      height: 24px;
      line-height: 24px;
      font-size: 11px
  }
  
  .search_autocomplete,
  input#input-0 {
      font-family: FontAwesome;
      font-style: normal;
      font-weight: 400;
      text-decoration: inherit
  }
  
  .tags {
      margin: 0;
      padding: 0;
      position: absolute;
      right: 24px;
      bottom: -12px;
      list-style: none
  }
  
  .tags li {
      float: left;
      position: relative
  }
  
  .tags a:after,
  .tags a:before {
      content: "";
      position: absolute;
      float: left
  }
  
  .tags a {
      float: left;
      margin-left: 20px;
      padding: 0 10px 0 12px;
      background: #0089e0;
      color: #fff;
      text-decoration: none;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
      -moz-border-radius-topright: 4px;
      -webkit-border-top-right-radius: 4px;
      border-top-right-radius: 4px
  }
  
  .tags a:before {
      top: 0;
      left: -12px;
      width: 0;
      height: 0;
      border-color: transparent #0089e0 transparent transparent;
      border-style: solid;
      border-width: 12px 12px 12px 0
  }
  
  .tags a:after {
      top: 10px;
      left: 0;
      width: 4px;
      height: 4px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      background: #fff;
      -moz-box-shadow: -1px -1px 2px #004977;
      -webkit-box-shadow: -1px -1px 2px #004977;
      box-shadow: -1px -1px 2px #004977
  }
  
  .tags a:hover {
      background: #555
  }
  
  .tags a:hover:before {
      border-color: transparent #555 transparent transparent
  }
  
  span.last_activity.ng-binding {
      position: relative;
      right: 129px
  }
  
  ul.tags {
      position: absolute;
      right: 1138px;
      bottom: 20px
  }
  
  span.bookmark_icon {
      position: relative;
      right: 130px;
      top: 1px
  }
  
  .user-avatar {
      height: 50px;
      width: 50px;
      border-radius: 50%
  }
  
  md-list.ng-scope.md-whiteframe-24dp.flex-sm-55.flex-gt-sm-45.flex-gt-md-45 {
      position: relative;
      top: 25px;
      left: 25px;
      background: #EF5350
  }
  
  md-list-item.md-3-line.ng-scope.md-clickable {
      background-color: #EF5350
  }
  
  .tags a {
      position: relative;
      left: 800px
  }
  </code></pre>
  
  <p>Im currently Programming this website <a href="https://ide.c9.io/amanuel2/ng-fourm" rel="nofollow noreferrer">here</a> so if you go there we can fix this problem real quick:
  <a href="https://ide.c9.io/amanuel2/ng-fourm" rel="nofollow noreferrer">https://ide.c9.io/amanuel2/ng-fourm</a></p>
  
  <p>Thanks for your time!</p>