Jump to content

Archived

This topic is now archived and is closed to further replies.

globalnative

Revslider not rendering correctly on mobile (or larger screens)

Recommended Posts

globalnative
Framework Version: latest
WordPress Version: latest
Plugins in Use: too many
Server/Host: ?
Screenshots:
unnamed.png
 
Details: I've noticed that on mobile the full width revslider doesn't render as I'd expect. You can see how it usually looks below:
Screenshot-2014-10-22-18.49.20.png
 
Is there a full-width mediabox which I can use that I can set to be the height of the screen, which would work on mobile? I'm also concerned about when people use larger screens, as I'm working on a 13". Will it show the same image on larger screens?
 
Thanks a bunch guys
Nate

Share this post


Link to post
Share on other sites
Danny

The RevSlider should try and resize your images as best as it can on mobile devices, the same can be said on larger displays too. The issue you have is your image is too large I think, in the RevSlider image upload option there is inline documentation describing the best image dimensions to use.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
globalnative

Hi Danny, thanks man! 

 

So, I changed the image first of all to be 2000px by 1045px, which makes it render correctly on the website. It still looks wrong on mobile.

 

Then I tried 2000x800 as suggested in the documentation. That renders like this:

Screenshot-2014-10-23-08.04.55.png
 

 

My feeling is that when I've activated the setting to set revslider height at screen height, it doesn't allow the image to resize down for mobile. Perhaps I'm wrong?

 

Any other ideas?

 

Thanks

Nate

 

PS: I've often had issues with parts of the image not showing up in revsliders in the past. It's always a game of guessing dimensions until the image renders correctly on my screen.

Share this post


Link to post
Share on other sites
Danny

Can you disable all active plugins, remove all scripts and custom CSS/LESS CSS you my have added. As the RevSlider should reduce the size of the image, as you can see from our demo here - https://cloudup.com/cQN3vUh5V7A

 

When you resize the browser, the slide image should resize like so - https://cloudup.com/cJ7Z9Hlljs2

 

When I view it on mobile devices it looks like this - https://cloudup.com/cCCvW-q7c1K


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
globalnative

Yes, but that's the problem. In the examples you've given, the image hasn't maintained it's dimensions when resized for smaller screens. It's had stuff on the sides and top chopped off. This is not ideal for me as I have important information at the edges. 

 

Also, it still doesn't explain anything about on larger screens. I build on a 13" screen (it's all I've got), but anyone on larger screens sees images which don't look good, like here: http://quirktools.com/screenfly/#u=http%3A//juliefranklin.com&w=1440&h=900&a=1.

In that example a lot of the text has been chopped off on the larger screen.

 

Even here, on mobile Galazy S2, the logo on the side is gone: http://quirktools.com/screenfly/#u=http%3A//juliefranklin.com&w=320&h=533&a=34

 

 

Share this post


Link to post
Share on other sites
Danny

The problem is your image, as I mentioned above the RevSlider uses the CSS property background-size and value cover. Here is a description of what cover does:

 

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

 

Therefore, what is happening is that the cover value is trying its very best to resize your image to match the element area size. If you reduce your image size, this should help your issue. For larger screens the cover value will resize your image to accommodate the larger dimensions.

 

If you do not like how the RevSlider works, you will need to use an alternative, a good one is Revolution Slider plugin. I will also bring up your concerns to our developers and see if we can change this to working more in your favour.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
globalnative
Thanks Danny! Where can I find revolution slider plugin please? Is it full width? Thank you :)

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×