Back side also stretched, boxes on mobile not centered left to right on screen

Hi @rusticartistry;

Your custom CSS is overriding our plugin CSS that’s why you are facing these problems.

For eg.: Both front and back sides are equal. But in your case it does not show equal because you override our plugin css.

If you remove this css then you can see both sides are equal.

.flip .inner-with-image img {
    object-fit: contain!important;
}

Thanks

I had added that shortcode based on your answer to another user’s question about the boxes getting stretched, and not being square. Actually, with this new update they aren’t stretched, they get cropped top and bottom to make them wider than they are tall. When I first installed this plugin I was able to have a row of 3 squares, both front and back, nicely spaced across the row. And on mobile the squares were centered left to right on the screen. Now they butt to the left edge of the screen and have space on the right side.
Per your previous instructions:
Hi @connectelevate,

Actually we are using “object-fit: cover” CSS property on image, so the image stretches.
If you do not want to stretch image then you have to override “object-fit: cover” css according to your requirement.

For Example.

.flip .inner-with-image img {
object-fit: contain!important;
}

Applying that shortcode did work to make the front side images square, but not the back side. If I remove that short code then both sides are not square. How do I make both sides square like the original plugin did?

yes – i am having these same issues!

Any update on a fix for this issue? Need to be able to use our own square images for front, and have both front and back side of flip box be square, not cut off at top and bottom. Also not flush left on mobile screen, but centered left to right. All of those things were default before the update.

Hi @rusticartistry,

I have cheched plugin’s design with previous versions and there is no issue at our end.
I have also checked with your flipboxes images and there is no issue related image size after plugin update (image size is same).
You are facing these issues because your active theme’s custom css is overriding our plugin’s bootstrap styles.

Thanks

Using Wayback I was able to take screenshots of how the flip boxes looked back in September and you can see that the images were square, with the full image showing, not with top and bottom cut off as they are now. I have not added any custom CSS to my theme and am using the same theme from when the flip boxes were sized correctly back in September. Since other users are having this same issue it does seem like it’s being caused by the new plugin code.
View screenshots:https://imgur.com/a/2IsG9Op
In old version picture of bench you could see ground below the bench. Now it is cut off. Same for pic of living room, before you could see the painting over the fireplace. Now it is cut off.
The uploaded image is square, as shown in the screenshot of the bench from within the Flip Box app, but it’s not being displayed as square.
Hope you can resolve this so we can have square images again.

Your custom css is overriding our plugin’s bootstrap.

Please check the screenshot, here is the custom css added by you.

https://drive.google.com/file/d/1fsz2Rui7LQdk-XaD0MjaNxJM9P858LXM/view?usp=sharing

Thank you for the screenshot. Please advise how I can find that in my theme code. I don’t know how it got there, possibly a dev who did some design work for me put it in, and I don’t know where it is in order to remove it.