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

Troubleshooting: Why Your Angular Data Binding is Failing

I am integrating a WCF REST service with an AngularJS application. My goal is to retrieve account information based on the account number provided, however, I am encountering an issue where the text "Account_Type" is displayed three times before showing th ...

javascriptangularjslinqwcf

What is the best way to retrieve and utilize this JSON information with D3?

Understanding how to load JSON in D3 is crucial for working with data visualization. The process involves using the following code snippet without encountering any errors: d3.json("sample_data/unique_items.json", function(json) { // do something }); Af ...

javascriptjsond3.js

Display the dropdown menu option value depending on the input value provided

I have a form field where users can input the number of people. Based on this input, I want to dynamically display only those tables that can accommodate the specified number. How can I achieve this using jQuery? <div class="control-group "> < ...

jquery

Using the i18next Module for Localization in ExpressJS and Front-End Development

I am currently integrating the i18next module into my NodeJs/ExpressJS web application. All the translation files are stored in the /locales directory. According to information from i18next.com, it can also be utilized on the client side. <script typ ...

javascriptnode.jsinternationalizationexpressi18next

Alternative method for handling web requests in case JavaScript is not enabled

Issue: i) I am developing a JSF2 application and need to implement a tab control on a page. When a user clicks on a tab, the content for the panel below should be loaded from an xhtml file on the server using an ajax call. ii) I want this functionality ...

javascriptajaxjsf-2progressive-enhancementgraceful-degradation

The custom validation in Node.js using Express-Validator is ineffective

I have implemented custom validators using express-validator to include specific validations: middlewares.js module.exports = function (app) { console.log('making sure I am being called'); return function (request, response, next) { ...

javascriptnode.jsexpress

Issue encountered when attempting to invoke server-side function using JavaScript

[WebMethod] public static string simple() { Home h = new Home(); h.logout(); return "dfdsf"; } public void logout() { Response.Redirect(Config.Value("logout")); } client side code $('#logout').on('click', function () ...

javascriptasp.net

The term "this" in the global scope versus within a function in the Node.js environment

console.log(this) // {} function abc(){ console.log(this) } abc() // global The concept of this can vary between the global space and inside a function in Node.js. console.log(this === module.exports) // true function abc(){ ...

javascriptnode.js

Alert from Google Chrome about Service Worker

My situation involves using FCM for sending web notifications. However, I am encountering a warning and the notifications are not functioning as expected when clicked (i.e., opening the notification URL). Below is my Service-Worker code: importScripts(& ...

javascriptgoogle-chromefirebase-cloud-messaging

What are the steps to create a button with similar design using css3?

How can I create a button with the same lower part as shown in this picture? I've already achieved 50% of it with border-radius, but need help expanding the lower part to match. Any suggestions? .list{ height: 280px; width: 220px; position: relativ ...

htmlcssbuttoncss-shapes

Is there a way to dispatch an event from one Angular ui-router view to another view?

In order to change the login button to display "logged in as xxx" after authentication, I have structured my page into three views: header, content, footer. The login button is located in the header view. Upon clicking login, it transitions to the "app.log ...

javascriptangularjsangular-ui-router

Discovering the data content received from a server using jQuery ajax techniques

Main.php <!DOCTYPE html> <html> <head> <title>Tutorial 21: Simple AJAX Requests with jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> & ...

jqueryajax

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

Placing information on the opposite sides of a table cell

I am currently working on a monthly calendar table where each cell displays the date in the top left corner and has a "+" button in the bottom right corner for adding content to that day. Everything works fine when all cells have the same height, but it br ...

css

When using NextJS with Redux Persist, the HTML does not get rendered in the initial server

I am currently utilizing ReactJS/NextJS along with Redux and redux-persist, as well as Ant Design. Recently, I have noticed that my html codes and other data are not rendering in the page's source. They do render in the browser and when inspected, but ...

javascriptreactjsnext.js

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

Encountering a peculiar issue with Joomla 2.5 and the Meta robots tag. Joomla seems to have a flaw where regardless of the URL, as long as there is a valid article id, it will generate a page. For instance: The id '61' is valid but leads to a ...

javascriptphpjqueryjoomla

A step-by-step guide to creating adorable rounded corners in a DIV element

I'd like to create a stylish rounded corner div on the top-right and top-left edges. I attempted it with the following code: border-top-left-radius: 5em; border-top-right-radius: 5em; Desired look of the div: https://i.stack.imgur.com/EoSvSm.jpg A ...

javascripthtmlcss

The Vue router is unable to access the store state

My Vue application is utilizing vue-router and vuex. I acquire an authentication token from my API, store it in localStorage, and then push it to the store. However, when the page refreshes, the app is unable to retrieve the token from localStorage and the ...

javascriptvue.jssingle-page-applicationvuexvue-router

Optimizing website layout for mobile devices

I have a website with a fixed page layout at . It displays properly on desktop browsers but not on mobile devices. The website is adjusting to fit the browser size, but some components are changing format. Can anyone offer assistance? Thank you! ...

htmlcssfixed-widthpage-layout

Create an unordered list using the <ul> tag

Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...

javascriptjqueryhtmlcss