Upon reviewing the image I have linked https://i.sstatic.net/KhQ07.jpg, it is evident that there exists a gap between the displayed image and the navigation menu on the page. This layout was meticulously crafted by me in Wordpress, built entirely from scratch.
All content relating to my Carousel feature can be found within this div.
<div id="awesome-carousel" class="carousel slide" data-ride="carousel">
</div>
My custom CSS is:
.carousel { background: #000; }
.carousel .item { height: 800px; overflow: hidden; }
.carousel .item img { width: 100%; height: auto; margin-top: -0%; }
.carousel-caption a { color: #fff; }
(1) How do I go about eliminating the troublesome gap? (2) Additionally, how can I ensure the complete image is contained within the designated area without any clipping at the bottom? The comprehensive code snippet inside page-home.php is as follows:
<?php get_header(); ?>
<div class = "container-fluid" style="overflow-y: auto">
<div class="row">
<div id="awesome-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$args_cat = array(
'include' => '18, 19, 22'
);
$categories = get_categories($args_cat);
$count = 0;
$bullets = '';
foreach($categories as $category):
$args = array(
'type' => 'post',
'posts_per_page' => 1,
'category__in' => $category->term_id,
);
$lastBlog = new WP_Query( $args );
if( $lastBlog->have_posts() ):
while( $lastBlog->have_posts() ): $lastBlog->the_post(); ?>
<div class="item <?php if($count == 0): echo 'active'; endif; ?>">
<?php the_post_thumbnail('full'); ?>
<div class="carousel-caption">
<?php the_title( sprintf('<h1 class="entry-title"><a href="%s">', esc_url( get_permalink() ) ),'</a></h1>' ); ?>
<small><?php the_category(' '); ?></small>
</div>
</div>
<?php $bullets .= '<li data-target="#awesome-carousel" data-slide-to="'.$count.'" class="'; ?>
<?php if($count == 0): $bullets .='active'; endif; ?>
<?php $bullets .= '"></li>'; ?>
<?php endwhile;
endif;
wp_reset_postdata();
$count++;
endforeach;
?>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php echo $bullets; ?>
</ol>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#awesome-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#awesome-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div >
<!-- This is for Welcome Message -->
<div class="row welcome">
<h1>Welcome to MyanmarTourism</h1>
<p>Wwer eree ere ae llji er we lkjj ewer jlkjkj erw jkljer lkjkje werewer wkerkjkl. We reakl lkjle aere ar akljiu are jearear lkljkjare. Jk are lkjklul kljrea elkjare lj. He ioierwer sdfsdf sdfeiuit kare adfkjkjl. Wer kjljser sejrlj ekrjkjsfiu ekrjlkejk.</p>
</div>
</div>
<?php get_footer(); ?>
I greatly appreciate any assistance provided.