Resolved make feature slider smaller but still responsive?

[yemoonyah+ 2]

Hi,

I changed height and width of the feature slider with the following code. But now it is not responsive any more.

How can I fix this?

http://new.langoncolombia.com/

#feature-area {

    border: 2px solid #ffffff;

}

#feature_slider {

width: 850px;

}

#feature-area,

.feature-wrap,

#feature_slider

.fmedia, #feature_slider .fcontent,

#feature_slider .text-bottom .fmedia .dcol-pad,

#feature_slider .text-bottom .feature-pad,

#feature_slider .text-none .fmedia .dcol-pad {

  height: 330px;

}

#features .content { width: 880px; }

[catrina 103]

The width is no longer responsive because you used pixels instead of percent as shown here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=50%25

[yemoonyah+ 2]

Ok, I changed from px to % but now the content of the slider only shows up partially and the slider is aligned left.

http://new.langoncolombia.com/

Here is the code I used:

#feature-area {

    border: 2px solid #ffffff;

}


#feature_slider {

width: 80%;

}


#feature-area,

.feature-wrap,

#feature_slider

.fmedia, #feature_slider .fcontent, 

#feature_slider .text-bottom .fmedia .dcol-pad,

#feature_slider .text-bottom .feature-pad,

#feature_slider .text-none .fmedia .dcol-pad {

  height: 330px;

}


#features .content { width: 80%; }

I also attached an image of how it's supposed to look.

[catrina 103]

Please add this CSS to center the feature slider:

#feature_slider div.fclone_wrap.hoempage.fix {margin: 0 auto !important;}[/CODE]

[yemoonyah+ 2]

thanks, but that didn't work

[Rob 547]

Okay. It seems like on the homepage of that site, the slider is resizing to 80%. However, the images themselves are not going to be resized by CSS. You need to use the aspect ratio system inside the slider setup for each slide. The width of the slider is not necessarily the width of the slide.

If you have an image of 1000x330px and cut the slider down to 80%, all it means is that you're telling the slider to show 80% of the slide. It doesn't rescale the slide itself. The Aspect setting should resize however, it's going to be proportional, and will shrink the height. The best method, in my humble opinion is to redesign the slides to meet the width, with lots of built in padding in the image.

[yemoonyah+ 2]

Ok, so setting the aspect ratio didn't have any effect at all. I guess I will have to resize the images.

Now all I need to do is to center the slider. The code Catrina suggested did not work. Any suggestions?

[yemoonyah+ 2]

I just played with the aspect ratio again and this time it worked. Last time I forgot to set the height mode to 'based on width'..duh.

So now the images resize to fit the slider container and they are responsive.

But now when you load the page the slider first loads in a bigger size and with images cut off on the right and then jumps to the right size.

I also still need to center it.

[Rob 547]

The reason for the image snapping in, then resizing is that the aspect ratio may have a little lag. This may be exacerbated if you have any cache enabled.

Unfortunately, centering is not something easily done. The normal method would be to add margin space left and right and as Catrina pointed out, set to auto. Doing this however, loses the responsiveness. I think you have to weigh the importance of the centering versus the import of the responsiveness. Personally, I'd recommend the latter.

[yemoonyah+ 2]

ok, thanks.

[yemoonyah+ 2]

how do I mark a topic a as resolved?

[James B 436]

Hi there, I'll mark this as resolved for you :-)

[James B 436]

The topic was marked as resolved.