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.