Styling of the checkout page is broken #65144

New Issue

Sybren A. Stüvel · 2019-05-26T10:51:49+02:00

Sybren A. Stüvel commented

2019-05-26 10:51:49 +02:00

The Store checkout page is a bit messed up layout-wise.
This is on Firefox 67.0 on Windows 10. The input fields don't have any outline, and are misaligned with the labels.

The [Store checkout page](https://store.blender.org/checkout/) is a bit messed up layout-wise. This is on Firefox 67.0 on Windows 10. The input fields don't have any outline, and are misaligned with the labels. ![image.png](https://archive.blender.org/developer/F7070089/image.png)

Pablo Vazquez was assigned by Sybren A. Stüvel

2019-05-26 10:51:49 +02:00

Sybren A. Stüvel commented

2019-05-26 10:51:49 +02:00

Added subscriber: @dr.sybren

Pablo Vazquez was unassigned by Dalai Felinto

2019-12-23 16:34:15 +01:00

Dalai Felinto commented

2019-12-23 16:34:15 +01:00

Added subscriber: @pablovazquez

Sybren A. Stüvel commented

2020-10-01 18:33:04 +02:00

Added subscriber: @MikeyN

Sybren A. Stüvel commented

2020-10-01 18:33:04 +02:00

@MikeyN you might be interested in this task as well ;-)

Evan Wilson commented

2020-10-01 22:47:10 +02:00

Added subscriber: @EAW

Evan Wilson commented

2020-10-01 22:47:10 +02:00

@dr.sybren I have a hint that might help with this task.

Here is the login page where the background is a different color than the boxes, making the boxes visible.

Here is the checkout page (while logged out && with an item in the cart) where the background is the same color as the boxes, making them invisible.

In 3a9962ecf1, it appears that the background color in woocommerece.css {https://developer.blender.org/diffusion/BST/browse/master/wp-content/themes/crux/woocommerce/woocommerce.css$1895-1898}

did not get copied over to style.css {https://developer.blender.org/diffusion/BST/browse/master/wp-content/themes/blender-crux/style.css$35-38}

I cannot say for certain that simply copying over the background color is the appropriate fix for the invisible input fields, as I haven't been able to test it out.

@dr.sybren I have a hint that might help with this task. [Here](https://store.blender.org/my-account/) is the login page where the background is a different color than the boxes, making the boxes visible. ![Chrome_85_Login.png](https://archive.blender.org/developer/F8944360/Chrome_85_Login.png) [Here](https://store.blender.org/checkout/) is the checkout page (while logged out && with an item in the cart) where the background is the same color as the boxes, making them invisible. ![Chrome_85_Checkout.png](https://archive.blender.org/developer/F8944362/Chrome_85_Checkout.png) In 3a9962ecf1, it appears that the background color in woocommerece.css {https://developer.blender.org/diffusion/BST/browse/master/wp-content/themes/crux/woocommerce/woocommerce.css$1895-1898} ![forgot_to_add_background_color.png](https://archive.blender.org/developer/F8945053/forgot_to_add_background_color.png) did not get copied over to style.css {https://developer.blender.org/diffusion/BST/browse/master/wp-content/themes/blender-crux/style.css$35-38} ![forgot_to_add_background_color_css.png](https://archive.blender.org/developer/F8945033/forgot_to_add_background_color_css.png) I cannot say for certain that simply copying over the background color is the appropriate fix for the invisible input fields, as I haven't been able to test it out.

Sign in to join this conversation.