HTML changing by itself in Revslider plugin

Support
#1

Hello!

I am trying to change the picture size inside one of my sliders, but it is not working. The image size is changing by itself within HTML. I don’t know why this is happening! Is there a way to have my own image sizes without having to use a child theme?

Here is the link : http://www.pharmacodex.org/index.php/notre-equipe/
It is the first slide of the slider. Both images are forced into size 100px/100px. So frustrating!

Thank you for your help :slight_smile:

#2

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#3

Hello Joao,
Thanks for replying.
I have updated the information :slight_smile:

#4

Hi,

By default the background image size is set to cover which means to 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

To make the image size as is, you can set it to contain by adding the code below in Revslider Custom CSS

.tp-bgimg.defaultimg {
   background-size:contain  !important;
}

Hope that helps

#5

Hello Paul,

Thanks for replying.

I have added the code to the custom CSS inside my slider setting but it did not work. I have uploaded here a picture of what i wish to achieve.

The university logo on the website is distorted because for some reason that i ignore it is being forced into 100px/100px dimensions. This is what i wish to achieve (logo respects the sizes i specified in HTML)

What can I do to fix this issue? I have tried everything :’(.

Thanks !

#6

Hi there,

The issue is with your image’s inline style,

<img src="http://www.pharmacodex.org/wp-content/uploads/2017/09/logo-ulaval.png" style="width: 300px; height: 100px;" />

It should be like this

<img src="http://www.pharmacodex.org/wp-content/uploads/2017/09/logo-ulaval.png" style="width: 100%;height: auto;">

Responsive width while maintaining aspect ratio. But the problem with that is, the slider will override that inline style. Instead, please add this CSS to your global custom CSS.

.counternotreequipe img {
width: 100% !important;
height: auto !important;
}

That should fix it.

Thanks!