flexslider on small screens - css

Question

I'm using the Sparkling theme on a Wordpress site. The theme uses Flexslider within a div at the top of the page. Each slide contains an image along with a div containing a post title and excerpt.
The slider is built within header.php like in this function:
function sparkling_featured_slider() {
if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
echo '<div class="flexslider">';
echo '<ul class="slides">';
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );
$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<li>';
if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
echo get_the_post_thumbnail();
endif;
echo '<div class="flex-caption">';
if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
echo '</div>';
echo '</li>';
endwhile;
endif;
echo '</ul>';
echo ' </div>';
}
}
endif;
And the resulting HTML looks like this:
<div class="top-section">
<div class="flexslider">
<ul class="slides">
<li>
<img width="1920" height="512" src="http://pathtoslider.jpeg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt="slide1"
srcset="pathstodifferentresolutions.jpg"
sizes="(max-width: 1920px) 100vw, 1920px" />
<div class="flex-caption">
<h2 class="entry-title">Tomatoes</h2>
<div class="excerpt">Knowledge is knowing that tomatoes are a fruit. Wisdom is knowing not to put them in a fruit salad.</div>
</div>
</li>
..more slides..
</ul>
</div>
</div>
<div class="container main-content-area">
By default it suppresses the flex-caption on small screens by setting display:none in a media query, but I want to display it, so I set the display to inline in my own media query.
This leads to another problem because the whole top-section div is the height of the image and there isn't necessarily room for the flex-caption.
I would like the bottom of the entry-title to be aligned with the bottom of the image, and the excerpt immediately below the image, which I accomplish like this:
#media (max-width: 768px) {
.flex-caption {
display: inline;
bottom: 0;
}
.entry-title {
position: absolute;
bottom: 0;
}
.excerpt {
position: absolute;
vertical-align: top;
}
}
but this doesn't resize the top-section div, so I'm overwriting the main-content-area.
I've tried lots of different things, including trying height:auto just about everywhere.
I can't figure out how the slider height is set. It seems to be within get_the_post_thumbnail. Is that the issue?

Answer 1

You can try setting image height in functions.php
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ).