theme probs on ipad and smart phone

Hi there, I just tested your theme on my partner's iPad and my smart phone. The two following problems occur.
http://temp.easycameraart.com/

iPad: the Slider does not move forward - I have to touch the little dots, and even still the dots only offer to switch between 3 slides.

smart phone: everything is shifted to the left, the Slider is cut (cutting the image in a 3rd), the circles are lined one on top of the other. only the header logo and footer are ok. this is quite a problem.

Just in case you think I caused any of this myself, through CSS styling, I'm pasting my code below.

Teresa


/* remove feature text heading */
.content h1{
display:none;
}

/* change colour of testamonial dots */
#slides_testimonial .next, #slides_testimonial .prev {
backgroundrange;
}

/* remove large feature text */
.feature-content-inner h2{
display:none;
}

/* change position of small feature text */
.feature-content-inner p {
margin-top: 90px;
}

/* change colour of small feature text */
.feature-content-inner p{
font-size:16px;
color:#003399;
}

/* remove small footer */
.footer_bottom{
display:none;
}

/* remove contact details from large footer */
.footer ul{
display:none;
}

/* change heading font families */
h1,h2,h3,h4,h5,h6 {
clear: both;
font-family: Helvetica;
}

/* change size and colour of testamonial heading */
.testimonial h2 {
colorrange;
font-size:26px;
}

/* change size and colour of testamonials */
.testimonial .item p {
color:#003399;
font-size:16px;
}

/* change colour of testamonial next prev boxes */
#slides_testimonial .next, #slides_testimonial .prev {
background: orange;
}

/* remove contact details from header */
.header-info{
display:none;
}

/* remove menu */
.menu_wrapper{
display:none;
}

/* remove read more buttons */
.feature-content .read-more{
display:none;
}

/* remove circle colour and change bottom footer to white */
.feature-content-inner .circle{
background:none;
}
.footer{
background:white;
}
.footer-wrapper{
background-color:white;
}


/* change slider heading text colour, width and position - for position change info under slider wrapper */

.flex-caption h1 a {
color:#ffffff;
font-size:22px;
}

.flex-caption h1 {
margin-bottom:10px;
width:250px;
margin-left:18px;
margin-right:15px;
margin-top:15px;
}

.flex-caption p {
width:250px;
margin-left:18px;
margin-right:15px;
color:#ffffff;
font-size:16px;
font-family:"Trebuchet MS";
}

.slider-wrapper {
font-weight:normal;
padding-top:30px;
padding-bottom:5px;
border-bottom:1px solid #fff;
}

.flex-caption {
background:url(images/cap-bg.png) repeat;
padding: 10px;
margin: 0;
position: absolute;
right: 15px;
bottom: 15px;
color: transparent;
font-size: 13px;
line-height: 18px;
width:306px;
height:auto;
border-radius:10px;
overflow:hidden;
}


/* change slider size */
.flexslider .slides img {
width: 950px;
height: 300px;
}

/* change spacing under slider by adjusting second margin-top */
.feature-content {
text-align:center;
margin-top:50;
padding:0;
margin-top:50px;
overflow:hidden;
max-width:100%;
}

/* change circle size and position */
.feature-content-inner .circle img {
width:210px;
height:205px;
border-radius:210px;
-moz-border-radius:205px;
-webkit-border-radius:200px;
-khtml-border-radius:195px;
background:#ffffff;
margin:-65px;
text-align:center;
margin-top:0px;

 

Hello,

We are looking to slider sliding issue.
For slider cutting issue. Remove code given below from your custom css.

/* change slider size */
.flexslider .slides img {
width: 950px;
height: 300px;
}