My website's owl-carousel is currently too tall, exceeding the full screen size. I've explored adjusting the height using the demo provided by owl-carousel for displaying one image per slide and utilizing the latest version of owl carousel 2. Trying to wrap the carousel in another div and modifying the outer div's height did not provide the desired result. While adjusting the width does affect the height, my goal is to specifically adjust the height without impacting the width. Below are snippets of my javascript and html code. Thank you.
<body>
<div id="navigation">
<ul>
<li> <%= link_to "About", pages_about_path, id: "about-link"; %> </li>
<li> <%= link_to "Contact Us", pages_contact_us_path; %> </li>
</ul>
</div>
<div class="wrapper">
<h1><img src="http://cdn-0.famouslogos.us/images/computer-logos/ab-computer-repair-logo.jpg"> </h1>
<div id="carousel" class="owl-carousel owl-theme">
<div class="item"><img src="https://responsivedesign.is/__data/assets/image/0013/5017/Owl-Carousel-2.jpg"></div>
<div class="item"><img style="width:100%; height:auto;" src="http://www.pcgeeksusa.com/wp-content/uploads/2015/01/computer-repair.jpg"></div>
</div>
<div class="contact">
<aside>
<h2>Contact Info</h2>
<p> Nomadic Inc. <br>
Tuscaloosa, AL 35404 <br>
<b> E-mail: </b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e303b2d3b32323f1e3d31333d3f2d2a70330b242c">[email protected]</a> <br>
<b> Phone: </b> 205-799-1668
</p>
</aside>
</div>
</div>
</body>
And here's the accompanying javascript:
$ ->
$("#carousel").owlCarousel({
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
})