DMS 2 Issue with Rev Slider

[timtimhungerfordcom+ 0]

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? 

 

 

[jmad 80]

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

[timtimhungerfordcom+ 0]

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.

[Danny+ 1,327]

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.

[timtimhungerfordcom+ 0]

www.herouniverse.com

[Danny+ 1,327]

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.

[timtimhungerfordcom+ 0]

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.

[Danny+ 1,327]

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.

[stephen2+ 1]

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/

[Danny+ 1,327]

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.

[stephen2+ 1]

Danny, Thank You

[Danny+ 1,327]

No problem.