Flip cards not filling div when screensize is samller

Hello,.
I have a site in which one of the flip cards is shorter in height when the screen size becomes smaller. height:100% is not working. Please see attached screenshot. the url is https://www.wigsbybarbara.com
Thank you

Hey @Jennine,

This setup would need a modified version of our Equal Height Columns snippet. Before I give you the solution though, please note that because this is not something that could be done using the native options available in the theme. Though it’s a snippet from us, it is still custom code and issues that will arise from the use of it and further enhancement are outside the scope of our support. This will serve only as a guide for you or your developer to get started.

Here’s the code you need to add in Theme Options > JS.

jQuery(document).ready(function($) {
	var max = 0;
	$(".x-face-outer").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".x-face-outer").css('height', max);
});

It works when I tested in the console but, when you actually add it in your site, it might not work because there’s another custom script with an error and that is this script below you’ve added in your Global JS. Please remove it. It looks like a custom script for smooth scrolling. You don’t need that as in the new version, the theme does all of the functions in that script.

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });

Hope that helps.

great ty :wink:

You’re welcome.

Hello,
After the wordpress update that code is no longer working. Do you know why, it was working perfectly after the update. Thank you.
Thank you

Hi @Jennine,

Have you cleared your browser caches after the update? It appears to be working on my end and there is no javascript error at all. Could you check it in private browser (like chrome’s incognito)?

Thanks!

Hello, yes i tried that. I dont have any errors either.If you drag the corner of your screen and make it smaller the cards stay at the same? This is what mine is doing. Thank you :grin:

Hi @Jennine

I’ve checked your website and I can see that there is a custom CSS code interfering with this script, it’s this code:

div.x-face-outer.back, div.x-face-outer.front {
	height:inherit !important;
}

I believe you added this CSS code in the WordPress Customizer > Custom CSS section, if so, then please remove it and the script will work fine.

Thanks.

Hi Thanks so much for your response. I updated wordpress last night and after the wordpress update the The cards looked like the screen shot below. I created a help post last night on the forum asking what happened. The rep that responded told me to change the type to black which is not how it was designed. For some reason the background colors are white after the update on both sides but the code still has the correct colors they were. After changing the height to inherit, it went back to the original design. I just took that code out so you can see whats happening. Thanks fo your help : )

Hello There,

Please have the css code updated and use this instead:

.x-card-outer .x-face-inner {
    height: initial;
    background-color: inherit;
}

Hope this helps. Kindly let us know.

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