Reduce gap between Slider and Zoom Image


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 2-May-15 (3.3.20) 3.1.* 3.2.* 3.3.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



9 thoughts on “Reduce gap between Slider and Zoom Image

  • Adrianne

    I would like to remove the space between the header and the slider on the front page and all other pages on my site. I just updated to the most current version of Customizr. Any help would be most appreciated. Thanks.

  • Nicole

    I’m trying to reduce the space between the slider and the featured page titles (which I reordered above the images), and I’d also like to reduce the space between the titles and the featured pages images. I’ve tried using the code above in my custom css, but it didn’t adjust anything. Any advice would be appreciated. Homepage is http://www.senecaacademy.org. Thanks!

    • Nicolas

      Here’s a quick css snippet to paste in your appearance > customize > advanced options > custom CSS

      #main-wrapper, .fpc-marketing {
      margin-top: 0px;
      }
      .fpc-widget-front .thumb-wrapper {
      top: -10px;
      }

      Hope this helps

  • Sally Farmer

    /* Reduce gap between Slider & Zoom Image */
    .marketing {
    margin-top: -20px;
    }

    /* Reduce gap between Zoom Image & FP Header */
    .widget-front > h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    }

    This code broke the theme bringing about the white screen of death

  • Sally Farmer

    /* Reduce gap between Slider & Zoom Image */
    .marketing {
    margin-top: -20px;
    }

    /* Reduce gap between Zoom Image & FP Header */
    .widget-front > h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    }

    This code broke the theme bringing about the white screen of death

    • Steve Klein

      Hello Dave,

      Many thanks for your thorough documentation and mod snippets for this theme: I’ve upgraded to Pro and now find that the snippets to reduce space between the featured images and the slider (I have it in Custom.css) don’t seem to be working. Any hints appreciated.

      • Rocco Aliberti

        Hello Steve,
        to apply the snippet above to Customizr-Pro (or Featured Pages Unlimited) you have to replace:
        .marketing with .fpc-marketing
        and
        .widget-front with .fpc-widget-front

        Hope this helps.

  • Tim

    Maybe this would be a better place to post. I would like to remove space both above an below slider. Any code for that?

Comments are closed.