Set custom height of Fullscreen slider

That makes sense but bear with me; I’m new at this.

I’ve been playing around with adding media queries, and it now seems to resize OK with my browser and looks good on my iPad. However, it doesn’t work well on my iPhone. Also, is there a way to make the buttons and background images responsive? On my iPhone, the buttons are big and the background image doesn’t resize.

Here is the code I added. Perhaps you have some suggestions to make the responsiveness better? I basically want the Slider to be 700px on a regular screen and then re-size smaller as the screen shrinks…perhaps I should try using a %?

@media only screen and (min-width: 200px) {
.avia-slideshow-inner {
height: 400px !important;
}
.avia-slideshow {
max-height: 400px !important;
}
}
@media only screen and (min-width: 400px) {
.avia-slideshow-inner {
height: 400px !important;
}
.avia-slideshow {
max-height: 400px !important;
}
}
@media only screen and (min-width: 800px) {
.avia-slideshow-inner {
height: 700px !important;
}
.avia-slideshow {
max-height: 700px !important;
}
}
@media only screen and (min-width: 1000px) {
.avia-slideshow-inner {
height: 700px !important;
}
.avia-slideshow {
max-height: 700px !important;
}
}
@media only screen and (min-width: 1200px) {
.avia-slideshow-inner {
height: 700px !important;
}
.avia-slideshow {
max-height: 700px !important;
}
}

Thanks in advance!