Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved make feature slider smaller but still responsive?


Question

Posted · Report post

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; }

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

ok, thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

how do I mark a topic a as resolved?

Share this post


Link to post
Share on other sites

Posted · Report post

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.

post-10444-0-85505100-1349797972_thumb.p

Share this post


Link to post
Share on other sites

Posted · Report post

Please add this CSS to center the feature slider:

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

Share this post


Link to post
Share on other sites

Posted · Report post

thanks, but that didn't work

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites