Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Media queries for popup shopping bag only

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #199504
    lapoza
    Participant

    I have a website that is running fine on desktop, but I have a shopping bag from Ecwid. This popup shopping bag is embedded in an HTML box on my site. It looks fine on desktop but will not automatically scale for mobile. I am testing Media queries in the Ecwid code and can change the overall width of the popup box based off the device being used, but i cannot figure out the correct code for resizing the popup for mobile. This is the code on my website that points to the Popup shopping bag:

    <meta name=”viewport” content=”width=device-width” />

    <script type=”text/javascript” src=”http://app.ecwid.com/script.js?6465246″></script&gt;
    <script type=”text/javascript”> xMinicart(“style=”); </script>

    The HTML box is on my website, and the CSS is the code I have been experimenting with on my ECwid design page. If I change the width it adjusts the overall width of the box, but all the contents inside the box stay the same size and do not scale.

    Here is the Ecwid CSS code:

    /* Portrait */
    @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
    div.ecwid-popup.ecwid-ProductBrowserPopup.ecwid {
    left: 0px !important;
    top: 0px !important;
    visibility: visible;
    position: absolute !important;
    overflow: visible;
    clip: rect(auto auto auto auto) !important;
    @viewport {width: 240px;}
    }
    }

    Obviously I am having troubles in figuring out how to use viewport

    Thanks,
    Jeremy

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.