Remove White Space Around Slider

So I worked it out, looks something like this:

‘.pad {padding-top: 0px; padding-left: 0px; padding-right: 0px;}’

Only now it looks very wide so I would like to make it slightly taller. Any help?

Hi there,

This can be done but it’s a little more complicated than it seems. The padding there is for the entire content column and changing that affects more than just the look of the slider. I wrote some CSS in my browser so it’s not fully tested but it should get the job done on all screen sizes.

Add this to your child theme stylesheet or custom CSS plugin:

#flexslider-featured {
    margin: -10px -30px 20px;
}
#flexslider-featured .post-thumbnail {
    margin-bottom: 0;
}
#flexslider-featured .post-meta {
	padding: 30px;
}
#flexslider-featured .post-title {
	padding: 0 30px;
}

@media all and ( max-width: 720px ) {
	#flexslider-featured {
	    margin: -20px -20px 20px;
	}
	#flexslider-featured .post-meta {
		padding: 20px;
	}
	#flexslider-featured .post-title {
		padding: 0 20px;
	}
}

@media all and ( max-width: 480px ) {
	#flexslider-featured {
	    margin: -15px -15px 20px;
	}
	#flexslider-featured .post-meta {
		padding: 15px;
	}
	#flexslider-featured .post-title {
		padding: 0 15px;
	}
}

Thank you so much. Indeed you were right, with my very poor code it moved all content.

If you just take a look at my site now, there is still a white space above the slider. Any thoughts on how to remove that? Could it potentially be my bad code already in the child style.css?

It looks like you may have already had changes in place when I was working from my browser. So I wrote CSS based on that, which is probably removed now.

In the second line of the CSS I gave you, change:

margin: -10px -30px 20px;

to

margin: -30px -30px 20px;

See if that does the trick.

Thank you so much. That has worked well. I needed to adjust the titles and tags around a bit but otherwise, all good.

Would you know how to increase the height of the slider? It’s just looking a little too wide.

Thank you for your help, I really do appreciate it.

Hi there,

That I won’t be able to help with, unfortunately. The slider is its own component and much like with the issue above, adjustments are a little more complex than they seem.

If you have a lot of adjustments you’d like to make, it may be best to hire a developer to get them all done at once, especially since these are based on your preference, not actual bugs or problems that need to be addressed.

@sinton – You could set the slider image height:

.flexslider .slides img {
    height: 450px;
}

But that disables the responsive property of the image so you’d need to adjust the height for specific mobile viewports using media queries.