Announcement

Collapse
No announcement yet.

No arrows displaying in mobile roundabout

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • No arrows displaying in mobile roundabout

    Can't post the link to the site but I can share a couple screenshots. In the mobile (phone) view. The arrows for the Featured Products disappears.



    The arrows are there in larger views



    What should I look for? The roundabout is not set to autoscroll.

    Also, a semi-related question - how do I make a roundabout display more than 2 in the mobile size? The images above the Featured Products are also in a roundabout, but I'd like it to display 4 images instead of 2.

    Thanks!
    Leslie
    Leslie Kirk
    Miva Merchant Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • I was working with the same issue on the related products. I noticed the css contained the display:none:
    <button class="x-carousel__button u-icon-chevron-left" data-hook="carousel__button-previous" style="display: none;"></button>.

    Found that the style is coming from the roundabout.css file.

    To over-ride it I added this to my theme-styles.css, notice the !mportant tag added to the display:inline-block.

    .x-carousel__button {
    display: inline-block !important;
    padding: 0;
    position: absolute;
    top: 50%;
    font-size: 3rem;
    background-color: rgba(255, 255, 255, 0);
    border: 0 none;
    opacity: 0.25;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: ease-in-out 0.3s;
    z-index: 50;
    }

    .x-carousel__button-right {
    right: 0;
    }

    .x-carousel__button:hover {
    background-color: rgba(255, 255, 255, 0.25);
    opacity: 1;
    }
    Gary

    [email protected]
    www.icCommerce.com

    Comment


    • I'm still trying to figure out how to hide the arrows on larger screen displays where it is not needed.
      Gary

      [email protected]
      www.icCommerce.com

      Comment


      • I have made an update to Roundabout which change the way the buttons are displayed: https://github.com/mivaecommerce/rea...dows/issues/51
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • Originally posted by gsam View Post
          I'm still trying to figure out how to hide the arrows on larger screen displays where it is not needed.
          Thanks! That got it for me. Now to figure how to change the number of items displayed.
          Leslie Kirk
          Miva Merchant Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


          • This may still need a bit of tweaking. The arrows are rather persistent when in the mobile view and the menu is displayed.
            Leslie Kirk
            Miva Merchant Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


            • Hi Leslie,

              Sounds like it might be a z-index issue. Can you post a link to the site?
              Matt Zimmermann
              Director of UI/UX Standards and Theme Development
              / Miva, Inc.

              Comment


              • Originally posted by Matt Zimmermann View Post
                Hi Leslie,

                Sounds like it might be a z-index issue. Can you post a link to the site?
                z-index is my thought too. Can't post the site, its a dev site behind a mote.
                Leslie Kirk
                Miva Merchant Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment

                Working...
                X

                This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                Accept