Slider description box size on iPads

I'm using the Blackbird pro theme to build our web site (www.seronix.com).

When the home page is viewed on an iPad, the dark box that contains the slider header and description is a taller and not as wide compared to the way it appears on other browsers and devices. Our slider images have text built into them, so this variation in size causes the box to cover the text in the slider images.

Is there anything that I can do to make the header/description box wider and not as tall on an iPad?

The home page works great on the Android tablets that I've tested, and it also works fine on Safari, Chrome, and Firefox on the Mac.

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 960px) and (min-width: 768px)
{
.flex-caption {
background: #211916!important;
width: 370px;}
.flex-caption h1 {
margin-bottom: 10px;
width: 350px;}
.flex-caption p {
width: 310px;}}

 

Nitesh, that worked perfectly. You're the man! Thanks.