Setting the maximum width for a JavaScript pop-up box

Below is the html code that creates a link reading "sacola de 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>

Clicking on the link will trigger a non-responsive pop-up window within the original window. This can cause issues on devices like iPads or iPhones where the pop-up exceeds the screen size.

To see the problem in action, visit this website and click on "visitor access". Then proceed to click on the "sacola de compras" link.

I am looking for a way to limit the width of the pop-up. Could this be related to the xMinicart function mentioned in the code?

If it helps, here is the javascript referenced above.

Thank you in advance!

javascriptjqueryhtmlioscss

Answer №1

Utilize max-width property

You can apply this in your CSS file

.my-popup {
    max-width: 300px;
}

Alternatively, you can use it inline in your HTML code

<div class="my-popup custom-PopupStyle" style="max-width: 300px;">

Answer №2

Ecwid has plans to update the popup-like window so that it becomes responsive and works well on all devices. In the meantime, here is a suggestion: while it may not make the popup itself responsive, you can avoid using the popup altogether by displaying the cart contents on a separate page that is designed to be responsive for mobile devices. You can achieve this by utilizing Ecwid's ecwid_ProductBrowserURL option in the following manner:

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

By implementing this option, when a visitor clicks on the minicart icon, they will automatically be taken to a responsive cart page. For more information on how to set this up, please refer to:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the CSS content-visibility property compatible with background images?

Can CSS content-visibility and contain-intrinsic-size also be used with the background-image property, or do they only work with IMG tags? Will either of these properties have any impact on the following code snippet? <span id="image"> #i ...

htmlcss

Executing a CRM javascript button triggers a request to a JSON URL and extracts a specific value

My current task involves creating a button in JavaScript due to system limitations preventing the use of HTML. This button should navigate to a specific URL (REST API to retrieve a JSON file). Furthermore, upon clicking the button, I aim to display an aler ...

javascriptjqueryjsonapicrm

Stripping CSS prefixes upon file initialization

When developing my application, I have a process in place where I load CSS files on the back-end using Express.JS and then transmit them to the front-end. However, before sending the CSS code to the front-end, I need to: Identify the user's browser; ...

javascriptcssexpressreplace

Having trouble retrieving the value from the input field with Angular.js

I am having trouble retrieving the value from an input field using Angular.js. Below is the code explanation. Here is my controller code: $scope.shipping=0; $scope.addProductInfoData=function(billdata){ console.log('valid',$scope.shippi ...

javascriptangularjs

Can React Router be integrated with Material UI tabs?

I have made some changes to the code of the Tabs component in material ui, <AppBar position="static"> <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="nav tabs example" > < ...

javascriptreactjsreact-routermaterial-uijsx

How can I omit spaces in the HTML output when saving a data frame using to_html?

After using the to_html method, I noticed that there are \n after > and spaces before <. Is there a way to prevent them from being saved? Here is an example of what I have: <table border="1" class="dataframe"> <t ...

pythonhtmlpandasdataframe

Listening for key combinations in VueJS using a mounted event listener

I am facing an issue with my global key listener - it only catches single key strokes. How can I modify it to capture combinations like ctrl+enter? mounted() { window.addEventListener ( "keypress", e => { console.log ...

javascriptvue.jsvuejs2frontend

What is the best way to center align tabs in a Bootstrap 4 list?

I am working with tabs structured like this: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> ...

htmlcssbootstrap-4

Use JavaScript to retrieve a value and display it on a PHP page

I am trying to create a system that can generate and deliver JSON data. Here is the PHP code I have so far: <?php header("Content-Type:application/json"); require "data.php"; if(!empty($_GET['name'])) { $name=$_GET['name']; ...

javascriptphpjsonajax

Obtain the value using jQuery from an AJAX request and display it

When I write the code below, the alert output is null: var availableSlots = ""; $.get( '', { availableSlots: userName }, function(a) { availableSlots = a; }); alert(availableSlots); Putting the alert inside the get function works fine, but ...

jqueryajax

Obtaining a response in string format using the $.ajax function

var module = (function(){ return{ loadData: function(url, success, error){ $.when($.ajax({ type: 'GET', cache: false, url: url, contentType: 'application ...

javascriptjqueryajax

Save the contents of a file within an HTML table using jQuery

I needed to insert multiple files into the database by uploading and adding each file's content to a table. Once all files were added to the table, I included the table's values along with the file content in form data which was then passed to aj ...

javascriptphpjqueryajaxblob

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

cssreactjs

Handle errors originating from unsuccessful connections to a server named "Event" when using RxJS's fromEvent method

Using rxjs fromEvent to establish a connection with a named sse Event, I am looking to handle an Error in case of connection loss namedEvent() { try { const eventSource = new EventSource( 'adress' ); return fromEvent ...

javascriptangularrxjsserver-sent-eventsrxjs-observables

Issue found: React-Redux action is not being dispatched

I'm currently working on setting up Google authentication in my React Next.js application. The process involves sending the access token to my backend, where it is validated before a new token is returned in the header for accessing protected resource ...

javascriptreactjsreduxnext.jsredux-thunk

What is the best method to verify image dimensions and size for three distinct target platforms, all of which have different image dimensions but the same size, within

I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...

htmlvue.jsvuejs2vuetify.js

Exploring ways to loop through objects in a React application

I'm trying to figure out how to modify the code below to iterate through a custom object I have created. function itemContent(number) { return ( <div > <div className="item"> <div className="itemPic& ...

javascriptreactjsobjectiteration

Unpacking nested objects using dynamically generated property names in a React state - a guide

Having trouble with using setState and figuring out how to destructure the object with a dynamic property name, denoted by id. The state looks like this after computation: { "inputConfig": { "5d4d684cadf8750f7077c739": { "0": "5d4d ...

javascriptreactjssetstateobject-destructuring

Design an element that stretches across two navigation bars

Currently, I have implemented two Navbars on my website as shown in the image below: https://i.stack.imgur.com/4QmyW.png I am now looking to include a banner that clearly indicates that this site is a test site. In addition, I would like to incorporate a ...

javascriptreactjstypescriptreact-bootstrap

Is there a way to fetch JSON data for a JQUERY datatable?

Is there a way to create JSON data for binding JQUERY data table? In my ASP.net web service (.asmx) code, I have the following snippet: <WebMethod()> _ Public Function Getcdata() As String Dim dt As New DataTable() Using con As New SqlConne ...

jqueryasp.netjsonvb.netdatatable