how to set max width to javascript pop-up

Question

The html code below results in a link which says "sacola the compras"

<div> 
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script> 
<script type="text/javascript">
xMinicart("style=","layout=Mini"); 
</script> 
</div>

If you click the link, a pop-up window appear (it's not a pop-up per say, as it appears in the original window). My problem with the pop-up is that it is not responsive. If I use an iPad or iPhone, the pop-up window will exceed the screen size.

For you to check the problem, please enter this website and click in visitor access . Then click in the link which says "sacola de compras"

How do I limit the pop-up width? Does it have to do with the xMinicart function above?

Not sure if it helps, but here is the javascript from the code above

Thanks in advance

Answer 1

Use max-width

Either in your CSS

.ecwid-popup {
    max-width: 200px;
}

Or inline, in your HTML

<div class="ecwid-popup ecwid-ProductBrowserPopup ecwid" style="max-width: 200px;">

Answer 2

Ecwid will eventually make that popup-like window responsive so that it will work fine on any device. Meanwhile, I can suggest a workaround: although it does not make the popup responsive, it will allow you to avoid popup and display the cart contents on a separate responsive page that will look fine on mobile devices. The workaround is using Ecwid's ecwid_ProductBrowserURL option like this:

 <script> var ecwid_ProductBrowserURL = "http://www.example.com/my_separate_store_page.html"; </script>

With this option used, a visitor who clicks the minicart icon, will be automatically redirected to a responsive cart page. Find the details on how to implement it here: http://kb.ecwid.com/w/page/15853260/ecwid_ProductBrowserURL