Feature Thumbnail to be Created in the Feature Slide Container

[fatchamp 0]

Hi, the feature thumbnails are now outside the slide container. Is there a way for us to work on the html to bring the thumbnails into the same container as where the slides are? In short, "

" to be placed within "

". Thank you.

[Rob 547]

Are we mixing apples and bananas? The feature sliders don't use thumbnails. It can use feature images. A thumbnail isn't quite the same thing. As the site you point me to isn't even using a PageLines theme, I'm not clear how to help with this.

[bxbmedia 2]

The easiest way would be using CSS and giving a negative margin-top to the #feature-footer div, which would bring it on top of the feature area like so: [code]#feature-footer { margin-top: -50px; /* play with this number to fit your thumbnails*/ } [/code]

[bxbmedia 2]

@rangelone - I believe @fatchamp is referring to the [i]Feature Thumbs[/i] feature navigation mode option for Features.

[Rob 547]

Ah, thanks @bxmedia.

[fatchamp 0]

Thanks bxbmedia, that's what I meant, sorry that it's unclear. I've tried your method, it works on larger screens but when it comes to the mobile, the navigation interferes with the feature slide due to the -50px margin. Is there a way to play with the HTML code? Thanks!

[catrina 103]

Editing the HTML in the template code isn't advised since potential problems can occur with updates. Are you using PageLines Framework?

[fatchamp 0]

Thank you for your response Catrina. Yes I'm using pagelines framework, but using another launch page hence you cannot see it live. If not advisable to work on HTML, is there a way to get this to work on CSS such that the phone version text and images flow in sequence neatly? Thanks!

[Danny+ 1,327]

Hi, What do you mean when you say you can not use the -50px as it interferes with navigation ? Can you provide a screenshot of this please.

[fatchamp 0]

Hi Danny, Here is the screenshot: [img]http://fatchamp.me/wp-content/uploads/2012/07/fc_screen.jpg[/img] The red circle indicates the interference of the thumbnail and the text above on the phone version. Without the -50px, the thumbnails rest nicely just below the text. It looks ok on larger screens. Just need to solve the phone version. Thanks!

[fatchamp 0]

I was thinking to play around with the height of the feature slide area, but as it also looks good on larger screens, the text interferes with the slide image on phone version too.

[fatchamp 0]

Hi, I've managed to resolve this: 1st, reduce the height of the slideshow so that the thumbnails go closer to the slides without leaving too much space in between. This only works well for the larger screens. When using the phone version, the text will cover the image. (by default there is a black translucent background beneath the text, but in my case I did not want this) [b]For the phone:[/b] Adjust the css code for the "responsive state" so that the phone version will look ok. Add this css to remove the image for phone: [b].responsive #site .content #feature_slider img {display:none;} [/b] Guess if anyone needs the image to be shown on the phone as well, maybe can also use this code but change the "img" to something else and add some margin or padding etc. Not sure if this is the best solution though, let us know thanks!

[fatchamp 0]

Hello once again, thought I share with you guys that adding this css also works, and in fact, this works better if you need your image to be on both the bigger screen and mobile version. @media handheld, only screen and (max-width: 767px) { #feature_slider img { /* you may wish to add padding-bottom: 30px or margin-bottom: 30px depending on preference*/ }

[Rob 547]

You know we do have a Browser Specific CSS plugin that might help. Also, for responsive design, I strongly suggest not using fixed pixel sizes, but use percentages wherever possible.

[fatchamp 0]

Cool! Shall check that out, Thks!