Wordpress/Woocommerce Styling Fix
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi 😁

It's me again and still in need for a few styling fixes on the page.

Something that's been bugging me for a long time now and I hope someone can fix is a resizing issue on the checkout page. You will need to create an account for this to be able to get through the checkout process.

On Step 2, select "ship to a different address?" and you will see that the expansion of the form breaks the layout of the page. The same applies when moving to step 3, where the text and page extends past the page layout. When you resize the browser window, you will see the problem fixes itself, but I don't want to install a notice for the customer to resize their browser windows each time ;)

There is a plugin installed to equalize the columns, but the resize does only trigger on a reload of the page, not on a static page that has interactivity. This was previously fixed somewhere else with jquery, so I hope it can be done here again, or maybe even something more elegant, I don't know :) I tried and failed with my knowledge, but I am sure it's not that difficult, and I am just being dense!

Thanks a lot guys! ✌️

awarded to Nuno Freitas

Crowdsource coding tasks.

3 Solutions


Hi,

Simple fix in your style.css find .site-main and add height:auto !important;

Should fix this for you.

Thank you,
Josh

Should be line 24 in you stylesheet
3pic 3 years ago
Hey Josh :) Thanks for this, this fixes one problem, but creates the problem of disabling or rendering the equal heights column plugin unusable for some reason. The new issue can be observed by replicating the steps above. I hope there is a way to get this to work without causing more headaches than I had to endure already ;D
Vyazhan 3 years ago
Had to submit another solution for it was to long. This way you could disable the even column height plugin.
3pic 3 years ago

You could re code it or just make it so woo-commerce pages allow for auto height.

Re-coding it would look like this:

.right-sidebar .widget-area, .right-sidebar .widget-area:before {
    width: 21.7391%;
}

.right-sidebar .widget-area {
    float: right;
    margin-right: 0.8em;
}

.right-sidebar .widget-area:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: 0;
}

.right-sidebar .content-area, .right-sidebar .content-area:before {
    width: 77%;
}

.right-sidebar .content-area {
    float: right;
    margin-right: 0em;
}

.right-sidebar .content-area:before {
    content: '';
    position: absolute;
    top: 0;
Just for curiosity sake, how would I allow woo-commerce pages to allow auto-height? I will try this fix in a minute :) Thanks a lot for your input!
Vyazhan 3 years ago
There should be a woo-commerce class on the body so you would copy the .site-main styles and add .body-class .site-main replacing .body-class with the actual class on the body.
3pic 3 years ago
Ok, I applied the re-code and it still gives me the same error unfortunately. would I need to change anything else to make this work? Sorry for being a pain in the rearside, I'm a bit dense at times when it comes to applying these fixes so sorry if it's being cumbersome.
Vyazhan 3 years ago
Did you disable the equal height script?
3pic 3 years ago
I did now, but the issue persists, plus now my columns are broken on the entire website ;P
Vyazhan 3 years ago
Ok maybe I was wrong. Sorry the adding the woo-commerce body class would work but so would the answer below.
3pic 3 years ago
Thanks a lot for your help :)
Vyazhan 3 years ago
Winning solution

Trigerring the equal height script does not work properly in this page, not sure why.

The best solution would be to remove the equal height script and redo the CSS for both columns and maybe switch around the HTML a bit, but that would take too long to implement.

Here is an alternative script that will manually set the heights of both columns when the checkbox is triggered or any link in the checkout is clicked.

This script has one disadvantage though, it has a small delay before fixing the heights. That's because it has to wait for the auto height to settle.

jQuery(document).ready(function () {
    function autosizeColumns() {
        var main = jQuery('#main');
        var secondary = jQuery('#secondary');

        main.height('auto');
        secondary.height('auto');

        setTimeout(function () {
            var mainHeight = main.outerHeight();
            var secondaryHeight = secondary.outerHeight();

            var tallest = mainHeight > secondaryHeight ? mainHeight : secondaryHeight;

            var height = 'height: ' + tallest + 'px !important;';
            main.css('cssText', height);
            secondary.css('cssText', height);
        }, 500);
    }
    jQuery('#wizard a').click(autosizeColumns);
    jQuery('#ship-to-different-address-checkbox').change(autosizeColumns);
});
You can put this code at the end of the file tabs-autoresize.js if you want.
Nuno Freitas 3 years ago
Thanks Nuno, I will try this in a second, not being the multi-tasker anymore, so sorry for the slight delays
Vyazhan 3 years ago
Thanks, this works :)
Vyazhan 3 years ago
Great! Thanks.
Nuno Freitas 3 years ago
View Timeline