• 0
Sign in to follow this  
Followers 0

Feature Thumbnail to be Created in the Feature Slide Container

Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

14 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah, thanks @bxmedia.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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*/ }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cool! Shall check that out, Thks!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0