Make Slider Image Responsive

Hello

Please have a look at this site:
http://www.sage-thyme.com/dev/      

Please notice how the 3  Slider images are not Responsive when viewed in smaller Browsers and Mobile.  
Cannot figure out the correct fix for this issue.

Any help is much appreciated.

Cheers
Miguel_GAsked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
start by setting this width to auto:

.home-bnr-jquery .home-banner-sub-full {
width: auto;
height: auto;
top: 0;
left: 0;
position: absolute;
background: none;
margin: 0;
padding: 0;
}

You'll have to make other adjustments too. There are a bunch of pixel widths you'll need to remove  or change to %, or auto
0
 
LZ1Commented:
2 things:
1. Give .size-full a width of 100%
2. Give .home-bnr-jquery .home-banner-sub-full a width of 100%
0
 
darjimaulikCommented:
Hi,
Few changes in CSS and it will work.

Style.css
.home-bnr-jquery .home-banner-sub-full {
/*width:940px;*/
width:100%;
height:283px;
top:0;
left:0;
position:absolute;
background:none;
margin:0;
padding:0;
}
.home-bnr-jquery .home-banner-sub-full p {
top:0;
left:0;
/*position:absolute;*/ /* This is Important*/
background:none;
margin:0;
padding:0;
}

Open in new window


_mobile.css
.home-banner-sub-full{
top:30px;
right:20px;
/*width: 676px;*/
width:100%;
height: 217px;
padding: 10px;
border: 1px solid #D7D7D7;
background: #fff;
}
.home-banner-sub-content-full{
background: none;
/*width: 676px;*/
width:100%;
height: 217px;
margin: 0;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.