WooCommerce Cart Drop Down Doesn't Fit on Mobile Devices

[minyona]

When I click the cart, the drop down goes off the left side of the screen on my mobile device.

How do I fix this?

Summary

tbssnew.wpengine.com

It happens slightly on homepage, and severely on inner pages.

[basanta]

Hi There,

Thanks for writing in!

Can you please try this code to your element CSS of your woo cart element?

@media (max-width: 768px) {
 $el .x-dropdown {
right: -100%;
}
}

Let us know if that works.

Thanks

[minyona]

@basanta

@media (max-width: 768px) {
$el .x-dropdown {
right: -100%;
}
}

That seems to have worked well. Thanks so much.

[christian]

Hey @minyona,

It is important that you also know the behavior of the Dropdown and that is shown in the Dropdown partial tutorial at https://theme.co/apex/forum#dropdown-modal-offcanvas

Having the details in the tutorial in mind, alternatively, you can adjust the position of the Dropdown using the First Dropdown Margin option. For your particular setup though, it will also affect the position of the dropdown in desktop so a custom media query is needed.

Thanks.