Jump to content


Photo
- - - - -
Resolved

make feature slider smaller but still responsive?

features feature slider responsive

  • Please log in to reply
12 replies to this topic

#1 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 09 October 2012 - 01:33 PM

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?

Please Login or Register to see this Hidden Content




Please Login or Register to see this Hidden Content



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 October 2012 - 02:24 PM

The width is no longer responsive because you used pixels instead of percent as shown here:

Please Login or Register to see this Hidden Content



#3 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 09 October 2012 - 03:51 PM

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

Please Login or Register to see this Hidden Content



Here is the code I used:

Please Login or Register to see this Hidden Content


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

Attached Files



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 09 October 2012 - 05:07 PM

Please add this CSS to center the feature slider:

Please Login or Register to see this Hidden Content



#5 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 09 October 2012 - 05:22 PM

thanks, but that didn't work

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 October 2012 - 03:39 AM

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.
  • bsaul likes this

#7 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 10 October 2012 - 01:27 PM

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?

#8 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 10 October 2012 - 07:39 PM

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.

#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 October 2012 - 10:49 PM

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.

#10 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 11 October 2012 - 01:39 PM

ok, thanks.

#11 yemoonyah

yemoonyah

    Super Member

  • Members

  • 143 posts
  • Framework Version:always the latest
  • Country: Country Flag

Posted 11 October 2012 - 03:11 PM

how do I mark a topic a as resolved?

#12 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 October 2012 - 09:13 PM

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

#13 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 October 2012 - 09:14 PM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, features, feature slider, responsive