Devin W.C. Ryan

Slider Flex Caption CSS

Slider Customization

Since not all my posts will contain a feature image I had to find a work around that would allow the text content to show properly in the slider.  In order to do this I added a very tiny white square as my featured image.  When it first displayed the caption for the post was at the bottom and ran out of the visual area (couldn’t even see ‘Read More’ button).  In order to accommodate this I modified the CSS for the slider so that the caption starts at 20% from the top instead of its default of 40%; in hopes this will also work for future blog posts without a featured image.

I had to change a block of CSS which starts at line 235 in theme.css from:

.flex-caption{
	width: 800px;
	position: absolute;
	top:40%;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	z-index: 120;
	color: #fff;	
}

To the following:

.flex-caption{
	width: 800px;
	position: absolute;
	top:20%;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	z-index: 120;
	color: #fff;
}

It is worth noting that a caveat I have discovered is that this is insufficient for smaller screen sizes so I may have to become more ‘clever’ in my featured images; like I did for this post, when I can.

Leave a Comment

Your email address will not be published. Required fields are marked *