[Wynaco]

The featured page slider is great, but sticks out awkwardly at 100% width, while the rest of the page layout has padding. Can this be changed with a bit of CSS added through the customizer? Ideally, I would put the slider in place of the header image, just above featured content.

Thanks!

[Mahesh]

Hi @Wynaco,

For the above you’ll need little customization. First create a child theme. You can find more on creating child theme HERE. Then in your child theme’s functions.php add the following codes.

function cleanbox_child_move_slider_below_site_title(){
    remove_action( 'clean_box_header', 'clean_box_featured_slider', 30 );

    add_action( 'clean_box_header', 'clean_box_featured_slider', 110 );
}
add_action('init', 'cleanbox_child_move_slider_below_site_title');

This will move, Featured Slider below the Site Title and above Featured Content.

Then for making Featured Slider same as the content, go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

#feature-slider .wrapper {
    width: 1200px;
}
@media screen and (max-width: 1280px) {
    #feature-slider .wrapper  {
        width: 1140px;
    }
}

@media screen and (max-width: 1152px) {
    #feature-slider .wrapper {
        width: 1038px;
    }
}

@media screen and (max-width: 1100px) {
    #feature-slider .wrapper {
        width: 960px;
    }
}

@media screen and (max-width: 990px) {
    #feature-slider .wrapper {
        width: 738px;
    }
}

@media screen and (max-width: 767px) {
    #feature-slider .wrapper {
        width: 660px;
    }
}

@media screen and (max-width: 700px) {
    #feature-slider .wrapper {
        width: 561px;
    }
}

@media screen and (max-width: 600px) {
    #feature-slider .wrapper {
        width: 522px;
    }
}

@media screen and (max-width: 540px) {
    #feature-slider .wrapper {
        width: 462px;
    }
}

@media screen and (max-width: 480px) {
    #feature-slider .wrapper {
        width: 380px;
    }
}

@media screen and (max-width: 400px) {
    #feature-slider .wrapper {
        width: 320px;
        padding: 0;
    }
}

#feature-slider {
    margin-top: 0;
}

#featured-content {
    padding-top: 20px;
}

Regards,
Mahesh

[Wynaco]

[RESOLVED]
That works great, thanks!

Some of the horizontal transitions do strange things beyond the new padding, but I’m using “fade out” so that won’t affect me.

Thanks again, great theme!

[Mahesh]

Hi @wyanco,

Add the following CSS, this will fix the issue for horizontal transition.

#feature-slider .wrapper {
    overflow: hidden;
}

Regards,
Mahesh

[Author]

Posts