Slider parts not show on mobile

• kendallw

  said

  I utilized the default home page with the Rev slider intro with an arrow button pointing down. I added a layer with copy on it so there are three pieces – logo, copy and button. It works great on the computer – when looking on my Android s4 – the logo and button don’t show, just the copy? Not sure if I missed some setting, but it’s weird and thought I should ask.

  Thanks, Kendall

• andy

  said

  When working with a layer, especially if you are re-using the demo data, check the layer properties section labeled “Layer Links & Advanced Params”. Inside that section, look specifically at the filed labeled “Classes” to see if it has a custom responsive class such as “visible-phone”, “visible-desktop”, “hidden-phone”, “hidden-desktop”, etc. These are used on the demo content to modify the display of the slide show for different devices to get the best display on all screen sizes.

  If one of these layers has the “visible-desktop” class it will only be visible on large screens. That would explain it being missing on a tablet. Removing the class will allow it to show on all screen sizes.

• kendallw

  said

  That worked. Thanks – now the spacing/alignment is all off. Is it better to have special phone layers? A second question to – how are you bringing in the font awesome icons into the slider?

• andy

  said

  The demo only uses images and standard text in the slide shows. The down arrow icon you’re referring to is a PNG file created in Photoshop.

  Having extra layers for mobile devices is entirely up to you and you needs. On some of the slide shows we use them and some we don’t. It will always be a content specific consideration.

• mrmovieticket

  said

  Hi Andy,

  I’m having a few problems as mentioned above, but I’m still not understanding what to do exactly.

  1. I have a movie theater background as my home screen with a movie trailer showing inside the movie screen. The problem, is that It looks different on every single computer screen (all different sizes, some very large, some small) I have, including mobile. When it looks great on one computer’s screen, everything is sized incorrectly and all over the place on another and mobile just looks awful. I’m missing items, Background images don’t look right, etc. I checked the class area as mentioned, but these areas are all blank.

  2. the template also states that we can create slide templates to be used over and over again and it took me so long to get this particular video sized just right on the homepage, so how do I keep from having to do all of this work (Sizing/Resizing) over and over again when I wish to change a video? I would simply change/replace the existing Youtube/Vimeo URL with a new one, however the theme doesn’t allow this. You have to create an entirely new video and resize it all over again. Please help, what can I do to fix all of the above issues?

  Regards….

• andy

  said

  @mrmovieticket

  1. I think it will probably help to watch the tutorials for Slider Revolution. They teach a great deal and have a lot of resources for learning to use the plugin. Here is the first in the series, however if it’s too basic you can get to the others in the series from that page: http://www.themepunch.com/codecanyon/revolution_wp/liveguide/02.video.html

  2. Not sure what you’re referencing in terms of “create slide templates” in reference to the slide show. If that is a feature of Slider Revolution, it is not one I have used before. It may have something to do with the import/export feature because I believe I have seen a reference to the word “template” on their demo site. I searched the item details for the term “template” and found only vague references in the change log. http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380

• mrmovieticket

  said

  Regarding 1:

  I’ve watched this video and some others before seeking help in the forum and it didn’t help. I did exactly what it instructed to do regarding “Classes” and how to make your slider fit correctly in all browsers and screen sizes. But when “Right clicking” on the slider page and then clicking “Inspect Element” as instructed, I couldn’t find the info they told me to copy & paste in the “Classes” area. What do I do Andy in order to have my slides render correctly in all browsers and screen sizes including mobile?

• mrmovieticket

  said

  Andy,

  I tried adding adding the text “hidden-phone” to classes are as you mentioned above, to remove some of the layers which don’t look so good on mobile. However, they continue to show on mobile. I have cleared the cache on my mobile devices and all the layers that I have marked hidden continue to show.

  What might I be doing wrong?

• andy

  said

  @mrmovieticket

  Try the class “visible-desktop” instead. The “hidden-phone” will only work on the smallest screen sizes but “visible-desktop” will remove it from anything under 768px.

  You don’t have to use a mobile device to see the effect of this. Just resize the browser width (take your browser out of fullscreen view) and grab the right edge of the browser to scale it smaller. You’ll see it instantly hide anything with a class specific to show/hide on different device sizes.

• mrmovieticket

  said

  1. I’ll give it a try. How do I get certain layers to show on mobile devices only?

  2. I replied to you earlier yesterday in the post above this one and didn’t receive a reply.
  I have pasted it again below, please respond when you have a moment.

  “Regarding Question 1: I’ve watched this video and some others before seeking help in the forum and it didn’t help. I did exactly what it instructed to do regarding “Classes” and how to make your slider fit correctly in all browsers and screen sizes. But when “Right clicking” on the slider page and then clicking “Inspect Element” as instructed, I couldn’t find the info they told me to copy & paste in the “Classes” area. What do I do Andy in order to have my slides render correctly in all browsers and screen sizes including mobile?”

• andy

  said

  1. “hidden-desktop” will show the item on tablets and phones only.

  2. Sorry if I missed this one before.

  I don’t know what the “right click” and look for a class thing you described is referring to here. That sounds like some instruction specific to the help materials from the plugin author. I’ve always had to work very hard to get any page on any site, and slide shows as well to display well on all devices. Responsive is not “easy” by any means and it takes time to get things right. My only recommendation is to do a lot of testing and experimentation. That is what works for me. I wish there were a magic button that could make this happen but in this case there is not. Screens on mobile devices are skinny and tall, on your desktop they’re wide and narrow, so we must manually account for these differences in dimensions, screen size and much more. The slide show is already doing a fantastic job of automating a lot of the factoring to calculate correct positions, placement and scaling of elements as much as it can. Beyond that it isn’t quite capable of being “content aware” yet.