- This topic has 3 replies, 2 voices, and was last updated 8 years, 7 months ago by Mahesh.
-
AuthorPosts
-
February 15, 2016 at 12:56 am #85424WynacoMember
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!
February 15, 2016 at 1:51 pm #85469MaheshParticipantHi @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,
MaheshFebruary 16, 2016 at 1:12 am #85514WynacoMember[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!
February 16, 2016 at 9:39 am #85538MaheshParticipantHi @wyanco,
Add the following CSS, this will fix the issue for horizontal transition.
#feature-slider .wrapper { overflow: hidden; }
Regards,
Mahesh -
AuthorPosts
- The topic ‘Featured slider width to match content area’ is closed to new replies.