NO BUG: Woocommerce quantity input fields centred

[turquoise]

Browser: Version 116.0.5845.187 (Official Build) (arm64)
OS: macOS Ventura 13.5.2
URL: local
Video:

Woocommerce quantity input fields not centered it shouldn’t be like that only when I change the text align to left its then shows correct to centred to button.

[itchycode]

Hi @turquoise ,

Thanks for the screenshots but I am not able to help without a link to inspect your CSS.
Please provide a link to the page. Best if you could provide some screenshots on how you set this up inside the builder too.

Regards,
Jenn

[turquoise]

This is how shows in text align to left and all shows correct:

This is when I try to text align center:

[itchycode]

Hi @turquoise ,

Thanks for the screenshots.

The Text align setting was meant for the root element, which is the most outer

for the products. So any html tag that is not listening to the text-align CSS property will do nothing (like the quantity input fields)

To align the quantity input field to the center, please add this CSS on the Products element.

root .quantity {
  margin-left: auto;
  margin-right: auto;
}

Regards,
Jenn

[turquoise]

@itchycode

root .quantity {
  margin-left: auto;
  margin-right: auto;
}

Thank you it helps. but is needs to be form builder

[jolia]

Hi @itchycode,

Even align self does not work on the add to cart element in this case. The reason is that the width of the add to cart element is 100% by default. Therefore, we must first set the width of this element to auto and then use align self to solve the problem.

Is there a specific reason that the width of the add to cart element is 100% by default?

[turquoise]

In general your css again ignores equal height

Then I need use this additional CSS:
.repeater-item {
justify-content: space-between
}

[turquoise]

Well, don’t tell me that it has to be like that that I need use so much CSS in bricks bulder its need to be set up from builder options.

[turquoise]

[turquoise]

I think you have to find a solution to control it. Because I know it can be done

[turquoise]

Sorry for the impatience, I just want to understand how it can be done

[jolia]

Just do these 3 things :

1- Set the width of the add to cart element to auto.
2- Set the margin top to auto.
3- Set align self to left.

[turquoise]

Can you please explain where exactly it should be done? Please

[jolia]

All these things must be done in the add to cart element

[turquoise]

Here?

[jolia]

Oh, I’m sorry. I thought you were using query loop.

[turquoise]

yes, but whats is the solution?

[danishdynamo]

I am having this problem also with the single product page’s add to cart element:

Entering “auto” doesnt help unless you want it to be the same size as your button.

[timmse]

Hey Chris,
Do you want to center everything inside the add-to-cart form?

%root% .cart {
  display: grid;
  place-items: center;
}