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

    #2
    That margin is set in your theme.css using the class .hero-slider
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      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


        #4
        Change the margin-bottom value here:
        Code:
        .hero-slider {
            margin-bottom: 3rem;
            visibility: hidden;
        }
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          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


            #6
            Yes, clearing your cache should be a normal step when making CSS or JavaScript updates.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Thank You!!

              Comment

              Working...
              X