Flash card setup?

[waynepatt58]

I have setup 4 flip cars in a row, with 4 columns. However when I have a smaller screen the flip cards squash up, I would like them to stack on top of each other on smaller screens. You can see the results in the pic. Any idea on how I can fix this?

[thai]

Hi There,

Please add my_cards ID to your section:

After that adding this custom CSS:

@media (max-width: 979px){
  #my_cards .x-column.x-1-4 {
    width: 100%;
  }
}

Hope it helps

[waynepatt58]

Thanks, I tried that but it did not work, will attach the URL for you. I added a section called flip cards to test it out.

[christian]

Hey @waynepatt58,

I don’t see the ID @thai suggested previously. Please assign it to your row containing the cards. Also update the code to this:

@media (max-width: 979px) {
    #my_cards .x-column.x-1-4 {
        width: 100%;
        display: block;
    }
}

Thanks.

[waynepatt58]

Thanks but what happens is the columns appear equal for about 1 second then revert back to being unequal. I cleared my cache and CDN so not sure why it is working at your end and not at mine. Maybe it is the browser, I am using chrome.

[ruenel]

Hello There,

You are having this issue because the images that you added in the card element is not of the same size.
All the codes did not work because you haven’t added a custom ID in your section. I went ahead and resolve the issue.
I have edited the page and added a custom JS script instead:

(function($){
  $(window).on('load resize', function() {
	var max = 0;
	$(".equal-height .x-card-inner").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".equal-height .x-card-inner").css('height', max);
  });
})(jQuery);

Please check your site now.