Compass Slider headings not working on smart phones

My client likes how his site is coming along. However he pointed out that the text is not working on his smart phone. I carefully designed slider images to have text come in from the left and now on the iphone it is a big blank on the left side?? I told him the importance of moving his site to a responsive theme and now it is not quite working. I assured him it would get fixed. Any help greatly appreciated. Thank you
http://mauds2.hwdesigndemo.com/

 

Hello,

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

Code:

 
 
@media only screen and (max-width: 767px){
.salesdetails {
display: initial;
background:none;
}
.sl-slide-inner h1 {
font-size: 13px;
line-height:5px;
margin-bottom:0;
}
.sl-slide-inner p {
font-size: 12px;
}
 
}

Thanks & Regards
Gourav Shrivastava

 

Thank you!! It is close, The text shows up, however the Header text over laps each other and the descriptor text has too much line height. Should I try h2 and less pixel in line-height? the text runs long over the image in width so it is difficult to read. Not sure how to take a screen shot on iphone or i would upload a picture. At least the text is showing up. Thank you

 

Well my attempts did not work. I googled how to take a screen shot of iphone, got that to work. Attaching a few of the sliders and how they are appearing on iphone. Thank you View attachment 4807 View attachment 4808 View attachment 4809

 

Hello,

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

Code:

@media only screen and (max-width: 767px){
 
.sl-slide-inner h1 {
line-height:15px;
}
.sl-slide-inner p {
margin-top:-8px;
padding:2px;
}
 
}

This will solve your issue.

Thanks & Regards
Gourav Shrivastava

 

oh boy when I pasted above it all disappeared. I went back to the first and combined some of the second code and have gotten closer. If I can get the h1 to move up I think it will work. I am attaching another screen shot. Thank you for help.

@media only screen and (max-width: 767px){
.salesdetails {
display: initial;
background:none;
}
.sl-slide-inner h1 {
font-size: 18px;
line-height:18px;
margin-bottom:0;
}
.sl-slide-inner p {
margin-top:-2px;
padding:2px;
}

}

 

Hello,

Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 767px){
.sl-slide-inner p {
margin-top: -15px;
padding: 0px;
font-size: 14px;
line-height: 15px;
}
}
 

You can adjust the value of "margin-top", "padding","font-size" and "line-height" as per your requirement.