Custom CSS Help Needed

I want to make the pink services boxes to have equal height and width in all screen sizes. How can I do that? http://tri+++.com/smile-moment/

  • Konstantinos Xenos

    Hi Manjeet Singh !

    Could you please add this code into your Themes functions.php ( preferably the child-themes ) and tell me if this works for you?

    What this will do is to simply add a small jQuery snippet that will calculate the width of the boxes and resize them accordingly to become Squared.

    add_action( 'wp_footer', 'custom_js_for_boxes', 999 );
    function custom_js_for_boxes() {
    	?>
    	<script>
    		( function( $ ) {
    			$( document ).ready( function() {
    				var w = $( '.medium-4 .banner' ).first().width();
    				$( '.banner' ).each( function() {
    					$( this ).css( 'padding-top', w );
    				} );
    			} );
    
    			$( window ).resize( function() {
    				var w = $( '.medium-4 .banner' ).first().width();
    				$( '.banner' ).each( function() {
    					$( this ).css( 'padding-top', w );
    				} );
    			} );
    		} ( jQuery ) );
    	</script>
    	<?php
    }

    Tell me if you need further help with this.

    If you're not comfortable editing code yourself you can send me some credentials and I can adjust it for you.

    You can send me the information needed privately through our contact form at https://premium.wpmudev.org/contact/#i-have-a-different-question by following this example:

    Subject: "Attn: Konstantinos Xenos"
    
    - Admin login ( if Multisite please provide Super Admin details ):
    Admin Username:
    Admin Password:
    Login URL:
    
    - FTP credentials
    Hostname:
    Username:
    Password:
    Port:
    Key-File ( and password ) if needed
    
    - Link back to this thread for reference
    - Any other relevant URLs -or- information regarding the issue that was not included in this thread

    Regards,
    Konstantinos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.