Total Theme Fixes

Problem: Stret hed Rows are wider than regular rows. This is a very annoying anomaly in the WPBakery Pagebuilder. The way it handles column gaps is like they add 15px on all sided. For stretched rows it is calculated differently, so they are 15px wider. This is annoying.

Also it is annoying that rows with a background get a 15px padding on both ends.

FIX ROWS

I tried so many different approaches. None of them were perfect. The most robust so far is to add a compensate for the margin in ALL stretched rows rows to match the regular rows. Make sure you hav eno background color in the regular row. This also works if you regulare ther inner padding!! Yeah!

/*FIX STRETCHED-ROW vs REGULAR-ROW MARGINS*/
.vc_row.wpex-vc-full-width-row {
	margin-inline: 0px !important; 
}

Fix vertical button label alignment

Sometimes the buttons i user are not properly vertically centered due to font redndering issues. This is the best approach so far to make them look neat.

/*FIX BUTTON VERT HEIGHT CENTER*/
.theme-button:not(.vcex-searchbar-button),
.menu-button .link-inner,
.woocommerce_checkout_place_order,
.checkout-button.wc-forward,
.woocommerce-cart-form__contents .button,
.woocommerce-mini-cart__buttons .button,
.button.wc-backward,
.forminator-button,
.product_type_simple.ajax_add_to_cart,
#seopress-user-consent-accept,
#seopress-user-consent-close {
	text-box: trim-both cap alphabetic;
    /*
    display: flex;
    align-items: center;
	*/
}

Version 2

Also you can use the inverted version add a negativ margin to ALL regular rows to match the stretched rows.

.vc_row:not(.wpex-vc-full-width-row) {
	margin-inline: -15px !important; 
}

Rest i tried

I also tried to add margins to stretched rows. But that also added margins to inner rows like card rows inside the loop item elements.

These approaches do not work:

.wpex-vc-reset-negative-margin, 
.wpex-vc_section-mx-0, 
.wpex-vc_row-mx-0 {
     margin-inline: -15px !important; 
}

.wpex-vc-full-width-row:not(.wpex-cols-right) .wpb_column:first-child .vc_column-inner {
	padding-left: 30px;
}
.wpex-vc-full-width-row:not(.wpex-cols-right) .wpb_column:last-child>.vc_column-inner {
	padding-right: 30px;
}
.wpex-vc-full-width-row.wpex-cols-right .wpb_column:first-child .vc_column-inner {
	padding-right: 30px;
}
.wpex-vc-full-width-row.wpex-cols-right .wpb_column:last-child>.vc_column-inner {
	padding-left: 30px;
}

:root {--wpex-full-width-gutter: 15px; }

.wpex-vc-reset-negative-margin, 
.wpex-vc_section-mx-0, 
.wpex-vc_row-mx-0 {
     margin-inline: -15px !important; 
}

The calculation for row widths and column paddings in the total theme is complicated and shown here.