Spacing on different devices

[phb]

Hi Pro Team

I have a problem to scale the image of a column. In each device size the image creates a spacing that I didn’t define. I tried to set up the margins and paddings, but without any success.

What can I do to make the spacing proportional in all dimensions of the different devices?

Here is the screenshot of a spacing that is right:

From that screen size the spacing already starts to change:

Here the difference in spacing becomes more striking:

I don’t know if that helps, but see that there is a padding on the image, but the padding on the image is zero:

Thank you in advance.

[christopher]

Hi Aline,

The browser shrinks the image depending on the window size and the wrapper element size of the image. Whenever the width gets smaller, the height of the image will be shorter proportionally.

Now for the case that you gave the screenshot, it seems that you added a fixed height value to the image element which forcest the wrapper tag of the image to be always 300 pixels for example. But the image inside still gets shorter because of the browser.

Please remove the fixed value that you added for the height of the image element.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[phb]

Thanks for the explanation, @christopher.amirian .

Strange, the width of the image is auto. Look:

[ruenel]

Hello Aline,

Thanks for the info. I have logged in and inspected your Academia page. Actually there is no issues with the width of the images. The problem is that each image element, you have added a custom class img-hover-zoom and then have applied this custom css:

.img-hover-zoom {
    height: 300px;
    overflow: hidden;
}

Please remove this code and this will resolve your gap or spacing issues.

[phb]

Thanks for the help. To maintain the hover-zoom effect, I changed the height to auto. Now it’s the way I wanted it.

[christian]

We’re glad you’re problem is now resolved.