How can I adjust the size of the carousel to occupy only 60% of the screen without the need for scrolling, allowing the panels directly below to fill the remaining 40%? The images within the carousel should resize accordingly based on the desktop screen size to maintain the 60% proportion.
Despite referring to the post Bootstrap change carousel height and attempting to modify the following:
.carousel-inner{
height: 60%px;
}
.item, img{
height: 100% !important;
width: 100% !important;
border: 1px solid red;
}
I have not been successful in achieving the desired outcome.
Below is the code for my current layout:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
...
</body>
</html>