Jump to content

Archived

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

timtimhungerfordcom

Issue with Rev Slider

Recommended Posts

timtimhungerfordcom

I have an image that looks fine with 2000x554 on desktop view but the moment I go into mobile my image gets thrown out of proportion. I know I need to set up media queries but I can't make any changes to it if I don't know the class associated to rev slider.  The fix I need is to make the height from 100% to 70% when I inspected the image and made the change in element.style but I can't use that in my custom fields. Any tips? 

 

 

Share this post


Link to post
Share on other sites
jmad

recommended proportions were 2000X800 i think.  could you alter the photo for starters or is the composition of the photo restrictive?

Share this post


Link to post
Share on other sites
timtimhungerfordcom

Well here's the catch, I was using 2 slider images, same size, one of them looks fine in mobile but not the other, while I'll keep in mind of proportions next time I create something but right now I am looking for the alternative where I can control this with media queries but can't do that without the proper class and can't even create a custom one to override it because I have no idea what runs the rev slider function.

Share this post


Link to post
Share on other sites
Danny

Can you provide a link to the site in questions, so we can see these images where one is fine on mobile and the other is not.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
timtimhungerfordcom

www.herouniverse.com

Share this post


Link to post
Share on other sites
Danny

The reason they look slightly different on mobile devices isn't related to the width or height of the image, it is related to width of where the content starts. The RevSlider section uses a CSS property called background-size and a value called Cover.

Cover will resize your image based on the container it is placed in i.e. the div and then resize it to best of its ability so that it acts responsively. However, to keep your image in proportion, some of your image may be cut off. Which is what is happening here.

On the first image in the slider, the content i.e. the figure of the man and the text is not as wide as the content of the Hero Universe and mobile phones width.

 

For example and this was a quick calculation, the first slide with the figure and text is roughly about 600 pixels wide where the Hero Universe and phone image has a width of nearly 1000 pixels. So even the though the images are the same size, the content of those images are different and thus is the cause of your issue.

 

If these images have been manipulated in an app such as PhotoShop, I would open them back up in PhotoShop and use the rulers guide to make changes to the Hero Universe image so that they have a similar width of where the text/images start and end to that of the First slide with the figure of the man.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
timtimhungerfordcom

So roughly in other words, I can't fix this with code if I wanted to and have to revisit the design and make the changes in order to make it scale responsively in the mobile? I was kinda hoping to make a quick hack with a media query or something.

Share this post


Link to post
Share on other sites
Danny

You could use a media query or custom CSS. However, that kind of customisation is beyond our support scope and we will not be able to assist you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stephen2

Danny:

 

I have a question. My pictures sizes correctly however, the issue I have is with the title and slogan text tag resizing correctly on mobile devices. Our text look great on desktop and Ipad, but when you test it on a mobile device the text does not fit on the slide.  Can you help me fix this issue. 

 

Thanks.

 

 

Here is the mobile test link http://mobiletest.me/iphone_5_emulator/#u=https://www.morningsiderecovery.com/

Here is the original page : https://www.morningsiderecovery.com/

Share this post


Link to post
Share on other sites
Danny

stephen2 - This is because the RevSlider has a particular width for where the title and tagline. As far as I can tell, your title exceeds these amounts. Therefore, to resolve your issue, you will want to either add a <br > like so:

 

Morningside's Treatment<br>
Addressed All Of My Needs.
 
This will resolve your issue. You could also use custom CSS, to reduce the text size for mobile devices.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stephen2

Danny, Thank You

Share this post


Link to post
Share on other sites
Danny

No problem.


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? 

×