• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

who can I make the 3 widgets same size always?

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Sunshine Pro Theme › who can I make the 3 widgets same size always?

Tagged: widgets

  • This topic has 4 replies, 3 voices, and was last updated 4 years, 1 month ago by lindebjerg.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 20, 2016 at 10:21 am #1506
    lindebjerg
    Participant

    Hi there,
    I work on this site: http://chirurg.lindebjerg.de/
    On the homepage widget areas: middle- left, middle, right I have 3 text-widgets.

    How can I make these 3 widget areas to appear with the same height always.
    The content on the homepage will not change much, but I will have more languages later on.
    So setting a fix height will not be the best solution, but a solution where the biggest widget makes the height for all 3 widget areas, if possible?

    Best regards,
    Jesper

    December 20, 2016 at 12:40 pm #1507
    Chinmoy Paul
    Moderator

    You can try

    http://brm.io/jquery-match-height/

    OR

    http://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery

    December 21, 2016 at 11:08 am #1508
    lindebjerg
    Participant

    hi Paul,
    I still need some help;

    I have loaded the file jquery.matchHeight.js into the folder js in sunshine-pro
    I wrote this into functions.php:

    // Load and initialize matchHeight jQuery
    wp_enqueue_script( 'match-height', get_stylesheet_directory_uri() . '/js/jquery.matchHeight.js', array( 'jquery' ), CHILD_THEME_VERSION, true );

    but I don’t know how to use this?

    Best regards,
    Jesper

    December 23, 2016 at 6:59 am #1509
    Davinder Singh Kanith
    Moderator

    This is advance customization. You can refer following resources:

    gist.github.com/wpsmith/3383785

    sridharkatakam.com/equal-height-elements-wordpress-using-jquery-equalheights/

    December 23, 2016 at 9:53 am #1510
    lindebjerg
    Participant

    Thank you Davinder,
    “you must know where to find the answers;-)”

    Your link to sridharkatakam.com made it possible for me to understand.

    Here’s how I did it, if someone else need “Equal height” in sunshine-pro:

    Upload jquery.equalheights.min.js to child theme directory/js.
    Create a file named say, equalheights-init.js in the same location as above having this code:

    jQuery(document).ready(function($) {
    
    	$(window).load(function() {
    		if (window.innerWidth > 1024) {
    			$('.home-middle .widget-area').equalHeights();
    		}
    	});
    
    	$(window).resize(function(){
    		if (window.innerWidth > 1024) {
    			$('.home-middle .widget-area').height('auto');
    			$('.home-middle .widget-area').equalHeights();
    		}
    	});
    
    });

    Add this in functions.php:

    //* Enqueue scripts
    add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
    function sk_enqueue_scripts() {
    
    	if ( is_home() ) {
    
    		wp_enqueue_script( 'equalheights', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.equalheights.min.js', array( 'jquery' ), '', true );
    		wp_enqueue_script( 'equalheights-init',  get_stylesheet_directory_uri() . '/js/equalheights-init.js', array( 'equalheights' ), '1.0.0', true );
    
    	}
    
    }

    Best Regards,
    Jesper

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2021 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates