Return to previous page

Responsive Checkout Order Review Overlapping

This topic has 8 replies, 3 voices, and was last updated 9 years, 2 months ago ago by Robert Hall

misswp

Participant

November 30, 2015 at 06:11

Hi,

I attach a screenshot of how the checkout page is looking on Mobile. You can see it is overlapping again. I had this issue with the overlap of delivery section on left in Checkout page, into the place order box on the right, and it’s happening again with the latest theme update.
It was fixed originally with the custom css >
@media (max-width: 480px) {.order-review {
margin-top: 108px !important;
}}

Now that is not working for phone & ipad. See screenshot and please advise a fix?

Thank you in advance.

Please, contact administrator
for this information.

#101871 Copied Theme version: latest WooCommerce version: 2.4.10

7 Answers
Eva Kemp

Participant

November 30, 2015 at 10:23
Hello,

Please remove the previous code and add this one in Theme Options > Custom CSS > Custom CSS for mobile:

.order-review { margin-top: 208px !important; }

Regards,
Eva Kemp.
#101905 Copied
misswp

Participant

November 30, 2015 at 20:51

Thank you for the answer, however this hasn’t made any difference at all.
Even after clearing the cache.

Thanks.

#102032 Copied

misswp

Participant

November 30, 2015 at 20:52

Also adding to this the order review box is fine on computer and laptop, I just need to stop it overlapping the last two colums on mobile and tablet. Please see my screenshot (link was attached to original post).

Thanks.

#102035 Copied

misswp

Participant

November 30, 2015 at 21:00

Okay, I fixed it with the following, but I’ve put it straight on child theme, not the custom css on theme options 🙂

@media (max-width: 480px) {.order-review {
margin-top: 208px !important;
}}
Would you have a fix for the arrows on the shopping system please, as I have updated the theme to the latest and on your demos they are beautiful flat arrows (on single product pages and cart) for choosing the amount of products and even though I updated I have the old looking arrows.

Thanks a mil.

#102040 Copied

Eva Kemp

Participant

November 30, 2015 at 21:14

Hello,

I don’t see any problems now:
http://storage6.static.itmages.com/i/15/1130/h_1448914427_5140098_70aa705b2a.png

Try to check in another browser and even other Internet provider.

Thank you.

Regards,
Eva Kemp.

#102046 Copied

misswp

Participant

December 5, 2015 at 01:40

Thanks Eva, yes correct, as I above my message said that I had fixed it by putting the code into the child theme.

Would you now have a fix for the following as requested above. 🙂

Would you have a fix for the arrows on the shopping system please, as I have updated the theme to the latest and on your demos they are beautiful flat arrows (on single product pages and cart) for choosing the amount of products and even though I updated I have the old looking arrows.

Thanks a mil.

#102855 Copied

Robert Hall

Participant

December 5, 2015 at 08:24

Hello,

WooCommerce has removed that feature in the recent update and replaced it with the number input type.
You may try https://wordpress.org/plugins/woocommerce-quantity-increment/ plugin

Regards,
Robert Hall.

#102864 Copied
Tagged: checkout, order, overlapping, responsive, review, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)