Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #85424
    Wynaco
    Member

    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!

    #85469
    Mahesh
    Participant

    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

    #85514
    Wynaco
    Member

    [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!

    #85538
    Mahesh
    Participant

    Hi @wyanco,

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

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

    Regards,
    Mahesh

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Featured slider width to match content area’ is closed to new replies.