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 3 years, 11 months ago by taisho.

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.

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.