Adjusting media query to reduce the size of the Bootstrap carousel

I am currently working with Bootstrap version 4.0.0-beta and utilizing the carousel feature in my project. I have managed to configure it perfectly for my monitor with a resolution of 1920 x 1200. However, I want to adjust its height based on the user's screen size, such as 1920 x 1080. Currently, I have set the Carousel height to 32rem but would like to reduce it for smaller screens. I have attempted using media queries to achieve this, but so far I haven't been successful. Can someone provide guidance on how to accomplish this?

Thank you.

htmlcsscarousel

Answer №1

Figured it out independently. Utilized the following code snippet:

@media screen and (max-height: 1000px) {
.carousel-item {
height: 24rem;
}}

Answer №2

Feel free to give the sample code below a try and let me know if it's functioning as expected.

.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  display: block;
  width: 100%;
  height: auto;
}

.carousel-inner {
  border-radius: 15px;
}

.carousel-caption {
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 0 10px 25px;
  color: #fff;
  text-align: left;
}

.carousel-indicators {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 15;
  margin: 0;
  padding: 0 25px 25px 0;
  text-align: right;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.carousel-containers {
  padding: 10px 0;
}

.carousel-containers {
  background-color: #fff;
  color: #555;
}

@media screen and (min-width: 768px) {
  .carousel-containers {
    padding: 1.5em 0;
  }
}

@media screen and (min-width: 992px) {
  .container {
    max-width: 930px;
  }
}

<div class="carousel-containers">
  <div class="container">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>


      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
      </div>


      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display multiple videos next to and below one another in a responsive layout

I am attempting to display multiple Vimeo videos responsively alongside and below each other. I have noticed that when using the embed-responsive feature, the videos may not align perfectly if different videos are used. However, they align perfectly when t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Fill the table according to the selected criteria

One issue I am facing is that the table does not get cleared when using the arrow keys to navigate through select options. As a result, the data from the JSON is populated in sequence and does not match the currently selected option. Does anyone have any ...

javascriptjqueryhtml

The camera will only activate once the page is manually clicked using Puppeteer

My recent project involved developing a NodeJS application that performs the following tasks: Setting up a server to serve static files using http.createServer Launching a puppeteer process to open Chrome browser in non-headless mode. The browser is direc ...

htmlnode.jspuppeteerwebcamgoogle-chrome-headless

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

javascriptjqueryhtmlcssflexbox

The alignment of navbar elements appears to be off in Jquery mobile

Currently working on an app using Jquery mobile, and encountering an issue where the navbar is not displaying elements in line. The google chrome console is indicating spaces between list elements. Upon removing these &nbsp characters, the elements ali ...

csshtmljquery-mobilenavbarjquery-mobile-navbar

Launching shuttles using HTML and JavaScript

I've been working on an HTML code with JavaScript for a platform validation project. Over the last couple of weeks, I've been diligently coding and testing to ensure everything runs smoothly. However, my code suddenly stopped responding, leaving ...

javascripthtml

What are the steps to make a unique and eye-catching text underline animation?

I'm encountering an issue while attempting to create a hover animation for an <a> tag with an underline effect, similar to the example showcased on this particular webpage. Even though the tutorial is readily available, my implementation seems t ...

csshover

Angular form array inputs

Currently delving into the world of Angular.js, I have encountered a simple problem that has left me baffled. My objective is to generate form inputs with the value of "connectedTeams" in HTML: <input type="text" name="connectedTeam[]"> <input ...

angularjshtmlnode.jsexpressangular-ngmodel

Why is applying CSS on an li element using .css() in JQuery not functioning?

Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...

javascriptjquerycss

Why does #id not work in CSS but element##id does? Additionally, why doesn't general CSS affect element##id when it should?

Why isn't #hex{ } working properly across different browsers (I've tested in Edge, Chrome, and Opera but it's not working)? On the other hand, img#/#hex{} (which I discovered using Chrome Developer Tools) works perfectly everywhere. Below i ...

htmlcss

The loading speed is being impacted by the jQuery in the <head> section and <scripts> in my code

My website includes Slick JS on the index page and Colcade on another page. Before launching my site, I want to ensure that the loading times are optimized. Can someone review the order of appearance for these scripts and confirm if it's correct? Than ...

javascripthtmljqueryslick.jsjquery-masonry

Problem with logo in MVC4 apps

I'm working on incorporating a logo into my MVC 4 website. When the logo is clicked, it should navigate to the home screen. In order to achieve this, I've added the following code snippet in the _Layout.cshtml file. <a href='<%= Url.A ...

htmlasp.net-mvcasp.net-mvc-4

What is the best way to assign classes to dynamically generated elements within a loop?

I have used a loop to create multiple components <li v-for="card in cardID" :key="card"> <app-profile class="profile" :id="cardID[i++]"></app-profile> </li> My goal is to wrap all these c ...

javascripthtmlcssvue.js

JQuery submit event not triggering object setting

I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...

javascriptjqueryhtmljsonobject

Using Thymeleaf to display <TR> elements according to specific conditions

Is there a cleaner way to show content only if one object is not null? No annotations found in this block of code. Here is the template: <div th:if="${currentSkills != null}"> <tr ><!-- Data File --> <td class="col_id"> ...

htmlthymeleaf

Positioning Elements at the Bottom with CSS

Here's the CSS code I have: .cmon { background-repeat: repeat-x; background-image: url("line2.png"); position:absolute; bottom:0px; } The goal is to have the image (a line in this case) placed at the bottom of the page and re ...

htmlcss

CSS Table Style Chaos

When styling a table using CSS, I encountered this line within the code: .pricing tr td:last-child { text-align: right; } This particular line ensures that the text in the last column of the table aligns to the right. The class "pricing" is applied to th ...

htmlcsscss-tables

Difficulty encountered when uploading CSV file through Laravel form to database due to file path issue

Is there a way to correctly set the path for fopen function when uploading a CSV file to a Laravel database via a form? Currently, my code only inserts files stored in the public folder. How can I modify it to handle uploaded files? When submitting the fo ...

htmldatabaselaravelcsvupload

Utilize @font-face when saving a webpage

I've been experimenting with @font-face to embed a custom font, but I've noticed that when saving the page locally on my computer, the font is not being saved along with it. This issue has occurred consistently across Firefox, Chrome, and Safari. ...

htmlcss

When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening? Here is the CSS for t ...

htmlcsspositionoverflow