Alignment issue on mobile devices

Hi - I have some alignment issues in mobile view on Woocommerce cart page. In the “add coupon” area the button is not properly aligned and also the “continue shopping” is looking messy. Both are aligned left and right in desktop mode but should preferably be centered on top of each other in mobile view.

Can you help fix this? Thx in advance.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 760px) {
        td .coupon #coupon_code {
          margin-bottom: 5px;
        }
       td .coupon #coupon_code, 
       td .coupon .button {
    		 width: 100% !important;
    		 display: block;
    		 float: none;
         text-align: center;
    	}
    }

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Great - that works well! Can you make it work similarly for the “Continue shopping” button which has the same issue?

Hello there,

Thank you for updating me.

I am glad to hear the first code worked for you.

I tried some coding but it is not as easy as we imagine. Because the text doesn’t have any wrapper like DIV or SPAN. If we force to apply custom code on this, we’ll have side effect for the selector shares on other shop messages.

In this situation, I can’t suggest you with the working solution. I’d recommend you to raise a ticket on WooCommerce issues reporting channel on GitHub.

Thank you for your understanding.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Fair enough - thanks for trying!

thx

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support