Smooth Slider Text Overlay

Hi –

I am having trouble with a Slider on the homepage. The problem was the image was not centered and the text overlay was aligned completely right to the header area. I fixed the image position and text overlay by using the following code:

#header-slider .flexslider {
border:none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
box-shadow:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
margin: 0 auto;
text-align: center;
position: relative;
}

#header-slider .slide-data {
width: 520px;
left: auto;
right: 0px;
bottom: 80px;
/*bottom: 180px;*/
background:rgba(0, 0, 0, 0.8);
text-align: left;
margin-right: 240px;
}

The problem is I am not sure if this is the accurate code, although the slider and text look fine on my MacBook Pro 15″ – when I shrink the screen it becomes distorted. The other pages throughout the site have featured image headers which format fine.

Any suggestions on code to fix the home page headers and overlay text for both desktop and mobile screens? Would also be helpful to align the arrows to the right under the text box.

URL:
http://dev.enzymatics.com.php53-15.dfw1-1.websitetestlink.com/

THANKS SO MUCH!

Bryan

https://wordpress.org/plugins/smooth-slider/

[ Please don’t bump, that’s not permitted here. ]