Add to Cart and Quantity not aligned in Genesis Connect for Woocommerce

[plentyvegan]

I'm not sure why but the quantity box and the Add to cart button are misaligned on the product pages on my Divine theme site.

http://plentyvegan.com/product/enjoy-life-seed-and-fruit-mix-not-nuts-beach-bash-6-oz-case-of-6/

Thoughts?

http://plentyvegan.com/product/enjoy-life-seed-and-fruit-mix-not-nuts-beach-bash-6-oz-case-of-6/

[Victor Font]

They're different heights, but they're aligned perfectly. You should know that Genesis connect has absolutely nothing to do with WooCommerce CSS.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[plentyvegan]

I don't think they are aligned perfectly.

Same with the Apply Coupon and Update Cart on the cart page. Here are screen shots:

[Victor Font]

What browser are you using? On Firefox on the mac they look fine. Whatever the case, it's a WooCommerce CSS issue. It has nothing to do with Genesis Connect.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[plentyvegan]

I've tried it both in Chrome and Safari on mac and they both show misalignment.

I deactivated Genesis Connect and it is still misaligned. Not sure why WooCommerce would be having this issue though - I feel like it's probably some interplay with the theme.

Regardless, I'll reach out to them.

Thanks.

[Victor Font]

Neither the theme of Genesis Connect have anything to do with WooCommerce styles. I put up a lot of WooCommerce sites, many are highly customized. I looked at your site in Safari and see the misalignment. It's being caused by the Genesis Slide-In widget. You'll find the problem code in wpstudio-gsw-style.css at line 12. It is inserting an after pseudo element to every element on the page.

*::after, *::before {
    content: '';
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[plentyvegan]

Thanks for your help, Victor.

Where is that css located to edit? I'm probably missing something right in front of me. I could find wpstudio-gsw-style.css referenced in the file genesis-slide-in-widget/genesis-slide-in-widget.php but don't know where the pseudo element is.

This might be helpful feedback for the plugin creator? Does it seem like it's a glitch?

Thanks again.

[Victor Font]

This might help you: http://www.w3schools.com/css/css_pseudo_elements.asp

Do you know how to use your browser's inspect element tool? If you inspect element, you can click on the item in the code window and see the before and after. It would look something like this:

<div class="quantity">
	::before
	<input type="number" step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
	::after
</div>

If you highlight the pseudo elements, you'll see the associated CSS.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[plentyvegan]

Hi Victor,

I was able to access the file I couldn't find via SFTP - I didn't realize WordPress limited file access via admin. I added the following code, as suggested by WooCommerce support:

.woocommerce *::after,
.woocommerce *::before {
display: none;
}

It looks great!

Thanks so much for your help.

Diana

[Author]

Posts