Card size dependent to browser size

Support
#1

Hi, ps check www.babyaid.de and the attached screenshots;

I have three cards side by side with different text on the backside.
If you shrink the browser window you can see that the card size gets different to each other.
Is there a way to keep them in the same size, independent from the browser size?

https://www.magentacloud.de/lnk/QlkunbAK

Thx
Andre

#2

Hi There,

Thank you for writing in, please add this to Theme Options > CSS

@media (max-width: 1024px) {
	.x-card-outer.flip-3d .x-card-inner {
		min-height: 474px;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	.x-card-outer.flip-3d .x-card-inner {
		min-height: 634px;
	}
}

Hope it helps,
Cheers!

#3

Works almost perfect.

Thx
Andre

#4

You’re most welcome!

#5

Hi, could you pls check again. I changed the body-font-family and now the box in the middle is shorter than the others.
Thanks
Andre

#6

Hey Andre,

The css would work only once upon loading. As soon as you resize, or change the font size, it will not have the same height again. Please remove the custom css and use this JS code instead. Please edit the page back in Cornerstone and find the Cornerstone custom js section, Custom JS and insert the following custom js code

jQuery( function($) {

  function card_resize() {
    
    var card_timeout = setTimeout ( function() {
    
      clearTimeout ( card_timeout );
      
            $('.x-card-outer .x-card-inner').each(function(index, element){      
                  var h = $(this).width();
                  $(this).css('height',h);
            } );
      
    }, 300 ); //let's add a 300ms delay
    
  }

  $(document).ready( card_resize );
  $(window).resize( card_resize );
  $(window).load( card_resize );
  

} );

Hope this helps. Please let us know how it goes.

#7

Hi, yes but now the boxes are not high enough.

[Album] Imgur

#8

Hi again,

Can you please try this code instead https://theme.co/apex/forum/t/browser-zoom-problems-issues/18145/8

Let us know how this goes!

#9

doesn´t work :frowning:

#10

Hi,

The code seems to work when I add it in the console to test.

https://www.screencast.com/t/mjRmfKdg

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!

#11

done
thank you

#12

Hi there,

The solution would be this,

jQuery( function($) {

  function card_resize() {
    
    if ( $(window).width() < 768 ) return false;

    var card_timeout = setTimeout ( function() {
      
    clearTimeout(card_timeout);

    var card_max = 0;

            $('.x-face-outer.back').each(function(index, element){      
                  
				 if ( $(this).height() >= card_max  ) card_max = $(this).height();
                  
            } );
    
    $('.x-face-outer').css('min-height', card_max );
  
    }, 300 ); //let's add a 300ms delay
    
  }

  $(document).ready( card_resize );
  $(window).resize( card_resize );
  $(window).load( card_resize );
  

} );

But because of the nature of flip-effect, it doesn’t work well when hovered due to transform styling which the new height isn’t counted to the default effect’s calculation.

Thanks!

#13

seems to be cool

thx
andre

#14

You’re welcome!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.