Question: I am trying to move my panel to the bottom of the screen when i view it on a phone but my code isn't doing the trick. How can i achieve this pleasae?

```css
.panel {
  background: white;
  height: 50%;
  position: fixed;
  right: 15px;
  width: 25%;
  padding-left: 20px;
}

@media (min-width: 458px) {
  .my_panel {
    width: 100%;
  }
}
```

```html
<div class="container col-md-4 col-md-offset-0 panel">
  <div style="overflow:scroll; height:70%" class="my_panel">
    <table class="table">
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
    </table>
    <a href=""><button type="submit" class="btn" id="btnAdd" style=" position:fixed; bottom:290px; right:20px">Add</button></a>
  </div>
</div>
```

Answer: 
You can do something like this:

```css
.panel {
  background: white;
  height: 50%;
  position: fixed;
  right: 15px;
  width: 25%;
  padding-left: 20px;
}

@media (min-width: 458px) {
  .my_panel {
    width: 100%;
  }
}

@media (max-width: 457px) { /* adjust to your needs */
  .my_panel {
    position: fixed;
    bottom: 0;
    /*width: ?;*/
  }
}
```

```html
<div class="container col-md-4 col-md-offset-0 checkout_panel">
  <div style="overflow:scroll; height:70%" class="my_panel">
    <table class="table">
      <thead>
        <tr> 
          <th></th>
        </tr>
      </thead>
    </table>
    <a href=""><button type="submit" class="btn" id="btnAdd" style="position:fixed; bottom:290px; right:20px">Add</button></a> 
  </div>
</div>
```
For fixed alignment you usually use `top: ?px`, `right: ?px`,`bottom: ?px` and/or `left: ?px` together with `position: fixed`, which determine the distance from the window border. So, if you use `bottom: 0px` in your @media-Block it will move your bar fully to the bottom.