Jump to content

Archived

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

tcsurfski

Optimal image size for full width RevSlider

Recommended Posts

tcsurfski

Hi There,

 

I have developed my website using several full width rev sliders across the top of the page.    I played around with a few different desktop screen resolutions and read various information on the web,  and determined that a width of 1560 px  and height of 430 px  would be optimal.   This works well on most laptops,  but it is not working on the iPad  (either horizontal or vertical view)   The images are not scaling completely and are getting cut off.   

 

On several of the images I have also set the slider height  value to 400  (no real reason for this other than it seemed to provide the best final result when viewing the images on my laptop)

 

I would like to know the best/easiest approach to have the images display correctly on the iPad.   

 

Very grateful for any direction you can provide

 

my website is:   www.tcsurfski.com

 

I am running DMS 2.0  and the Workspace Theme

 

thanks

 

Nick

Share this post


Link to post
Share on other sites
Danny

Hi Nick,

 

The RevSlider section uses a CSS property called background-size and a value called cover. Cover scales 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, the image is being resized to fit the element it is in, this means that some of your image may be missing. If you do not like how this works, you can either try and override it or use the Revolution Slider plugin. However, for me personally the use of cover is the best option.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tcsurfski

Hi Danny,

 

Thanks for your feedback.   You'll have to bear with me here, as I am pretty new to web site development.    Based on what you're saying above,  it sounds like if I took out the "cover" setting,  then on high resolution screens I would likely have blank space on the sides?

 

Maybe the issue on the iPad is that I have set the height set to a fixed value (400)  and that halts the width scaling (to maintain ratio)  at a certain point,  which is ultimately still wider than the iPad resolution

 

I would rather not add another plugin if there is a way to make this work with the RevSlider,  but if needed,  I'll test out the plugin

Share this post


Link to post
Share on other sites
Danny

I don't have my iPad handy, can you provide screenshots of what it is you're seeing when viewing your site on an iPad please


Please search our forums, before posting!

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? 

×