Make responsive slider work on responsive site. WordPress
Hi there. I have a responsive slider on my responsive site (test.themartist.com). Problem is that the way the developer put it in, the sites responsiveness is quite messed up. The original theme is "Volumes" by Themezilla. (http://demo.themezilla.com/?theme=volumes)
Ultimately, I don't need the slider to be responsive... I could have it just 960px, with the backgrounds color changed via jquery - I have this color effect on my live website at themartist.com.
At the end of the day I want a slider working with full width color, and some cool jquery effects that take advantage of our animation. All while working nicely on iPad and mobile. As you may notice, right now its a bit messed up.
I'm an animator, who has played around with web design but am not a coder, so any advice would be appreciated. I'll gladly pay for a working solution. If a developer is required to help out with this, please let me know.
Answers (2)
Jatin Soni answers:
If you mean you want to change slider's width than you might need to set width in jquery/javascript where the width is defined.
Matthew Hunt answers:
Hi Martin,
The theme was created to be responsive. So all of the elements around the slider are going to have a percentage width that will fit whatever device the site is viewed in. This can be a problem if you have a fixed-width unresponsive slider and the rest of the site with a responsive layout. The problems you will face even without looking at this on an iPad or iPhone is that the entire slider will show from edge to edge on the screen, but the rest of the content will stop to the left of that. The solution here would be to either make the slider responsive...Which is very difficult given that you have those animated elements.. Plus it would not do much on a small screen... you would barely be able to see those elements and characters! So the best thing I can think of for you is to turn this site into an unresponsive one. You would need a coder to go in and remove the media queries css code and probably the viewport meta tag. OR you can do this, which I think is a better option.. Keep the responsive stuff if that is working for you and just decide to hide the slide for mobile... You can use the mobble wordpress plugin for this if you were entering in php code into the template... to show this slider for desktop and a different one for mobile... one that has perhaps a separate set of images resized especially for those devices.. That sounds like a pain to me so you could try just static images for those devices... flexslider is a good one out there.... also royal slider from code canyon ... and ios slider...
The real answer here is that you will need someone to go into the template and hack the theme or change the css to modify what you have existing to one of the suggestions I listed above.
Hope that helps!
-Matt
themartist comments:
Hi Matt
Thanks for that, but if you look again - the slider is in fact responsive. Also the slider, is already activated to be hidden on mobile view.