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?

  • Konstantinos Xenos
    • Rubber Duck Debugger

    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() {
    		( 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 ) );

    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 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
    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


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.