Announcement

Collapse
No announcement yet.

Levels ReadyTheme. How to narrow space between Hero Image and Promo Imagea

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

  • Levels ReadyTheme. How to narrow space between Hero Image and Promo Imagea

    HI I am using the Levels Readytheme and on the SF page there is space between the bottom of the Hero image and Promo Images. Can anyone direct me to where and what code I would need to change to narrow up that space? Thanks

  • That margin is set in your theme.css using the class .hero-slider
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • HI Below is the code in the theme.css file for the hero-slider. Can you tell me what I need to change to narrow that space up between the hero image and the promo images.
      .hero-slider {
      margin-bottom: 3rem;
      visibility: hidden;
      }

      .hero-slider.slick-initialized {
      visibility: visible;
      }

      .hero-slider img {
      width: 100vw;
      }

      .hero-slider .slick-dots {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 1rem;
      bottom: 2rem;
      left: 50%;
      line-height: 2;
      margin: 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 7rem;
      }

      .hero-slider .slick-dots li {
      margin: 0 0.25rem;
      vertical-align: middle;
      width: 1rem;
      height: 1rem;
      }

      .hero-slider .slick-dots li button {
      width: 1rem;
      height: 1rem;
      padding: 0;
      }

      .hero-slider .slick-dots li button::before {
      line-height: 1;
      width: 1rem;
      height: 1rem;
      content: '';
      opacity: 1;
      background: transparent;
      border: 1px solid #fff;
      border-radius: 1rem;
      }

      .slick-dots li.slick-active button:before {
      background: #fff;
      color: transparent;
      opacity: 1;
      }

      Comment


      • Change the margin-bottom value here:
        Code:
        .hero-slider {
            margin-bottom: 3rem;
            visibility: hidden;
        }
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • HI
          Yes this is what I did and no changes. Wondering if its always a issue of clear cache after I make a change?

          .hero-slider {
          margin-bottom: 1rem;
          visibility: hidden;
          }

          Comment


          • Yes, clearing your cache should be a normal step when making CSS or JavaScript updates.
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment


            • Thank You!!

              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