Center With Button On Shop Page

Hello,

these steps worked for the same problem on a different website. Probably the 1st isn’t needed in this case. Please try them out:

This moves Add to cart button to the next line instead of keeping it in the same line through inline-block:

form.cart button[type=submit]:not(#qib_id):not(#qib_id), .add_to_cart_button:not(#qib_id):not(#qib_id), form.cart .qib-container+div:not(#qib_id):not(#qib_id) {
    display: block;  
}

Because display: flex eliminates a break which appeared after display: inline-block, margin-bottom needs to be added:

.qib-container:not(#qib_id):not(#qib_id) {
    display: flex;
    margin-bottom: 10px;
}

Change input element to have 100% of available width instead of a fixed number of pixels from plugin’s settings:

.qib-container .quantity input.qty:not(#qib_id):not(#qib_id) {   
    width: 100%;  
    max-width: 100%;  
}

div container of the input element needs to be similarly resized:

.qib-container div.quantity:not(#qib_id):not(#qib_id) {
    width: 100%; 
    max-width: 100%;
}

Best regards,

Ryszard

• This reply was modified 4 years, 10 months ago by taisho.

I got an email reply but don’t see the reply on this thread?? The suggested fix did not work at all. It stacked the + and – buttons on top of the input box.

I edited my post immediately because of incorrect formatting (code not formatted as code). Now it is stuck to be manually reviewed by a moderator.

That’s what I see on the website in Incognito mode:

https://i.imgur.com/arG41pv.png

Isn’t this what You wanted?

Yeah. So when I applied your code, the first time, it stacked the buttons and the second time I tried, the buttons were tiny. I’ll try again. Thank you.

Is there a way to just center it in the qib-container div without having to change the width. The 100% width looks horrible on mobile. Thanks!

I see, what You are looking for is:

.qib-container:not(#qib_id):not(#qib_id) {
    margin-left: auto;
    margin-right: auto;
}

This should work without any of the previous changes.

Perfect! I need to learn more CSS. Thank you!!