[Marty SParticipant]

Hi
I am using Integrity dark with a child theme
Having a problem with images and Revolution Slider not automatically resizing when the site is viewed on a smaller screen For instance when I view the site on my Samsung Note 10.1 tablet, the overall site shrinks but the images do not shrink enough and run into each other and the slider view is cut off at the right

The site is http://www.ignitionmetalartdesign.com
I can give password etc if you need
Thanks!
Marty

[Marty SParticipant]

Hi
I am using Integrity dark with a child theme
Having a problem with images and Revolution Slider not automatically resizing when the site is viewed on a smaller screen For instance when I view the site on my Samsung Note 10.1 tablet, the overall site shrinks but the images do not shrink enough and run into each other and the slider view is cut off at the right

On many of the images I have set width as px instead of % to make them fit nicely in a row

The site is http://www.ignitionmetalartdesign.com/my work (MY WORK page )
I can give password etc if you need
Thanks!
Marty

[RadModerator]

Hi Marty,

Thanks for posting in.

Sure, you may provide us your login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Marty SParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for writing in. I have checked you site and the revolution slider itself is able to size down without a problem.
The issue with the slider as well as your images are that they are overlapping even on desktop screen size. This is due to how you have put inline styling. I see that you are using Visual composer and adding in widths for your images.

You might be designing in a browser window that is not set to 100% as when I size the resolution down in the browser it starts to look better. This is how it looks at 100% http://prntscr.com/59n7mr

when I size it down to 75% it looks a lot better like so http://prntscr.com/59n9ff

to reset your browser resolution if you are using chrome, press ctrl+0 or cmd+0 if you are on a mac. go to the settings menu on the top right hand corner. http://prntscr.com/59nb9r

You will then be able to style your site better that way. On the other hand which would probably be easier, just leave the width field on your images blank to allow the responsive styling to do the re-sizing of the images.

Hope this helps!

[ZeshanMember]

Hi Marty,

Thank you for writing in!

Upon checking, it seems you’re using the images in the rev slider as background images with background-size: cover CSS property, which adjusts the image proportions according to the size of it’s container (see: http://prntscr.com/59nbe1).

I’d advise not to use background-size: cover and instead use contain (see: http://prntscr.com/59nbye).

For future reference, we have limited support for revolution slider plugin as it’s a 3rd party plugin, which covers it’s compatibility issues with X. So any question related to transitions, animations or how the certain feature of the slider works, would be getting outside the support we can offer.

You can review our Kb article Revolution Slider for more information.

Thank you for understanding. Take care!

[ngrhdParticipant]

Hello!

I’m having a similar problem with the slider on my website too present above the header on homepage. The slider would automatically resize itself but not the image. The image will not resize responsively but rather remain static as it is. As advised, I switched to contain but the image will still not resize.

Please advice.

Thanks!

[ngrhdParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I noticed that slider works fine while I’m login but as soon as I logout it doesn’t work as expected.

Do you have any cache plugin? if so please clear cache on both site and browser and test again.

Hope it helps.

[mayaruthParticipant]

Hello,
I’m having a similar problem, where my full-screen main home rev. slider image is fine on desktop and on larger mobile screens. But on smaller mobile screens, the image doesn’t crop enough to get all the words from the title on the screen, so the right side of the title is cut off.

I tried playing with the layer grid size for mobile in the revolution slider settings, but that doesn’t seem to help at all 🙁 It works fine if I use auto or full width slide settings, but then my nag bar falls of the screen on a desktop and it doesn’t look good on desktop. I’d like to keep full screen, but have it work on mobile.

Please advise?
Thanks!

[mayaruthParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Thanks for writing in!
You have two options.

#1 Add following CSS to customizw/custom/css and to force image size :

@media (max-width:767px){
.tp-bgimg.defaultimg{
background-size: 100% 100% !mportant;
}
}

#2 You can add a background image without the title, then add title as slide HTML layer.

Hope that helps.

[Author]

Posts