Buy Now button alignment For Mobile device ( variable product )

Buy Now alignment for mobile device is ok (simple product ) -https://prnt.sc/IAdu9nbO01oz
But In variable product alignment is not ok see this -https://prnt.sc/E_PvAu58_i20

Remember In mobile device Both simple products + Variable product – its should be this style like this -https://prnt.sc/IAdu9nbO01oz

I attached admin user and pass

Variable product link -https://fuyana.shop/product/dawah-jersey-follow-the-sunnah-611/ (alignment ok)

simple product -https://fuyana.shop/product/igt-gas-safety-device/ (alignment not ok)

Hello,

Your custom code breaks the form, so please remove it and recheck the issue: https://prnt.sc/WzKFr5e3RPev

Let me know the results.

Kind Regards

Your answer proved that You don’t try to solve this problem for one time. why Not you read my message carefully.

I explain everything so that all of my problem cover it and you got it fully but your reply to it very lengthily process.

why not you check it form your side, you said i try to remove it at first and i see fix or not. But why don’t you check it from your side.

I explain everything please check it

Please carefully read customers every message .

Your answer proved that You don’t try to solve this problem for one time. why Not you read my message carefully.

I explain everything so that all of my problem cover it and you got it fully but your reply to it very lengthily process.

why not you check it form your side, you said i try to remove it at first and i see fix or not. But why don’t you check it from your side.

I explain everything please check it

Please carefully read customers every message .
=============================================

Your reply I remove this code -form.cart {
justify-content: var(–content-align);
flex-wrap: nowrap !important;
display: inline-flex !important;
justify-content: center !important;
gap: 8px !important;
}

why not you try this I share my admin pass

if you remove it from your side and again test it meet my requirements but You don’t do it

Hello,

I checked it via the browser before I sent you a message. So I made a video where you will be sure that the issue in your custom code that affects form on the mobile single product page:

https://take.ms/oW16b

Kind Regards

Make sure that both single product page and variable product page both the same style (display inline flex)

Like this – https://prnt.sc/IAdu9nbO01oz

Hello,

For now, I see that the default styles work and on both pages the buttons are inline, here is a video:

https://monosnap.com/file/sGsQGZXDpsloGMQNX5suKcWFt9eDd5

Or do you mean that you want exactly the display inline flex CSS property for the buttons?

I await your response.

Kind Regards

not responsive fix it please browses it from mobile device – https://prnt.sc/DLmijIPA3M41

Hello,

1. In our theme, the quantity, add to cart and buy now buttons are already inline, they fall under each other only if there is not enough horizontal space for them. This is done so that they do not go beyond the edge of the screen and are always available for clicking: https://gyazo.com/34a26cdd00681a1762084b2f4d4bdf97

With the help of custom code, you can turn off the wrapping of these elements so that they are always in one row, but in this case, on the smallest mobile screens, the buttons may go beyond the edge of the screen: https://gyazo.com/42da4d055125db0fc8b7560f14b9bddd

2. If you are satisfied with this position of the buttons on mobile, use the following custom code to disable the wrap for the buttons of simple and variable products:

/* simple product */
.summary-inner > .cart:not(.variations_form) {
	flex-wrap: nowrap;
}

/* variable product */
.summary-inner .variations_form .woocommerce-variation-add-to-cart {
	flex-wrap: nowrap;
}

Kind Regards

ok thanks got it

Hello,

Always remember that you can reach out to us with any questions you may have.

Have a good day!

Kind Regards

[Author]

Posts