Resizing paper-dialog to default after setting it to fit the window

Question

I'm working with paper-dialog's responsive design. By min-width: 320px I was able to make it full screen using the following style:

paper-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
}

And it is scrolling accordingly. But when the screen got larger, I want to set it to it's default style. I tried this style:

paper-dialog {
    position: fixed;
    top: 5%;
    left: 5%;
    bottom: 5%;
    right: 5%;
    padding-bottom: 10%;
    margin: 0;
    height: 100%;
  }

But this is the closest I can get it where I want it to be.

The dialog is cropped at the bottom. I just want to revert it back to its default style. Sorry I'm not that good with CSS. Thanks for anyone who can help :)

Answer 1

What I did is I reversed the min-width: 321px to max-width: 321px and tried to set the paper-dialog on full-screen whenever the screen is only by 320px. Thanks for taking the time to read :D