Docs

[logoglo]

Hi there, I have some Visual Baker flip boxes setup:

http://486.408.myftpupload.com/why-upsiid/

But as you can see, when you make the page thinner, they overlap, is there anyway of preventing this? maybe it has to do with the columns?

Thanks.

Gary.

[Rupok]

Hi Gary,

Thanks for writing in! You are using the columns correctly but you have set static height and width for the flip cards. Kindly remove static height and width or use percentage.

Cheers!

[logoglo]

Ok, I have put the width back to 100% (I cannot put a % height to it though, it messes it up, so I put 250px which is the height of the image inside) but its still overlapping….each flip card has an image, that is not text, just an image…white background. It there a way to stop it overlapping?

[Rupok]

Hi Gary,

Thanks for clarifying. I see that’s not even an image rather a background image. Certainly it’s not the right way of using Cards element. I am afraid it might not work as expected.

Thanks for understanding.

[logoglo]

The cards are setup for use with images and text, so I used an image, is there no way of stopping that background image from shrinking or overlapping?

[Thai]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 979px){
	.cq-flipbox-left {
		background-size: 100% 100% !important;
	}
}

Hope it helps 🙂

[logoglo]

thanks! It nearly works perfectly, but as you make the width of the page smaller, they still overlap slightly before switching..

[Rupok]

Hi there,

Thanks for updating. In that case you can change the max-width to a higher value.

Cheers!

[logoglo]

Great! thanks!

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts