Scrollable carousel images with responsive design in bootstrap on mobile devices

While working with a responsive Bootstrap carousel, I've encountered an issue where there is a 'scroll' on mobile devices. Can anyone provide some helpful suggestions on how to resolve this?

You can view the carousel in question at this link:

The slide images are configured as backgrounds, and the relevant CSS code is provided below:

.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

It appears that the '100vh' height property is causing the issue. When reduced, a white border is visible at the bottom. Is there a way to make the carousel slides responsive without encountering the scrolling or white gap problem?

cssbootstrap-4carouselresponsive

Answer №1

(To find an alternate solution in Javascript, please refer to the end of this response)

It appears that you are encountering issues with the vh unit adjustment, which I believe has been implemented on iOS and Android devices.

This adjustment prevents the vh from changing as users scroll vertically, avoiding a jumpy effect when part of the browser bar disappears due to changes in viewport height. Setting the vh to a fixed value ensures consistency even when the viewport size shifts.

The workaround I have used is to set the height slightly less than 100vh. While this may result in taller footers for some sites, it serves as a temporary solution until a proper CSS method is found to accommodate devices with varying vh values without extra spacing at the footer.

Although not a complete resolution, due to length constraints for comments, here is an alternative approach using CSS variables.

For those interested, there is a JavaScript technique described at https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Simply add the following line after your existing code `height: 100vh`:

height: calc(var(--vh, 1vh) * 100);

To ensure this adjustment works properly, run the following JavaScript upon page load (and resize if the user changes device orientation):

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`)

Answer №2

It might sound simplistic, but I encountered a similar problem recently and found a surprisingly simple solution. By setting the width to auto, the issue was resolved and the scrollbar disappeared on smaller screens:

width: auto;

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

switching brand and toggle in the bootstrap navbar

I am looking to rearrange the brand and toggle button on mobile view if the screen size is small enough. The brand icons should be on the right side in desktop view, while the links should be displayed normally. Examples: Desktop: +--------------------- ...

htmlcsstwitter-bootstraptwitter-bootstrap-3navbar

Using CSS to align the position of a div with the last word position of an h4 element

Trying to figure out how to position a div at the end of an h4 text element has been challenging. When the h4 text is on a single line, it's easy to place the div correctly. However, things get complicated when the text spans multiple lines. In that c ...

htmlcsstextposition

HTML: Dealing with issues in resizing and resolution with floating elements on the left and right using

Encountering some issues with the HTML code below when resizing the window: 1: The right bar suddenly drops down if the width is made too small. 2: The spacing between the content and the right bar expands as the window width increases. <style ty ...

htmlcss

Emphasize cells and headers when a cell's value deviates from its initial value

I implemented cell editing in my primeng table. Here is the code: <div class="card"> <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }"> <n ...

htmlcssangularprimengangular10

assigning the browser's width to a variable within an scss file

Is there a way to dynamically set the browser's width as a variable? I am familiar with @media queries, but I need to calculate the browser's width for a specific purpose. I attempted using jQuery to achieve this, and it works well with a fixed ...

javascriptjquerycsssass

Trouble with displaying vertical scroll bar in React app when height is set to 100%

I am developing a React application where I need the content to always occupy at least 100% of the height to style the background accordingly. I have attempted to achieve this by setting the CSS height to 100% at the top level, which works fine. However, t ...

htmlcssreactjsmaterial-ui

Can you customize the "rem" values for individual Web Components when using Angular 2's ViewEncapsulation.Native feature?

I'm interested in creating a component with ViewEncapsulation.Native that utilizes Bootstrap 4 while others are using Bootstrap 3. Below is the component code with Bootstrap 4: import { Component, ViewEncapsulation } from '@angular/core'; i ...

csstwitter-bootstrapangularweb-componentbootstrap-4

Why isn't the Angular directive resolving the dynamic button text variable?

Trying to implement an iPhone-style Toggle Button using CSS in Angular. The issue I am facing is that the dynamic button text variable "{{v1['btn2']}}" is not being evaluated properly the first time, although it works fine with static text. URL ...

javascriptcssbuttonangularjsdirective

The Conflict-Free Dilemma of JQuery Cycle

Everything was working smoothly with the implementation of the JQuery Cycle Plugin. However, as I attempted to link a separate JavaScript file for a Menu in the Head Section from this source , <script type="text/javascript" src="js/ddmegamenu.js"> ...

jquerycss

What is preventing me from clicking on the left side of the link on this CSS flip card while using Chrome browser?

When attempting to click the left side of the link on the back of this flip card in Chrome, it does not respond. However, hovering over the right side allows interaction with the link: /* Vendor prefixed by https://autoprefixer.github.io */ .card { ...

htmlcsswebkitcss-transforms

Prevent tooltip text from appearing when a button is disabled in an angular application

As a beginner in UI development, I have a requirement for my Angular application. I need to enable and disable a button based on certain conditions. The tricky part is that I want to display a tooltip only when the button is enabled. I have managed to chan ...

javascripthtmlcssangularsyncfusion

Having difficulty creating a simple HTML menu, where one button is visible but the other is unresponsive despite having identical CSS styling

Looking to enhance my HTML skills as a beginner, I've begun building a simple website and am currently focusing on the menu. I created a "home" button (which is visually there but not functional), and then attempted to create another button next to it ...

htmlcss

What is the best way to implement responsive input fields and buttons on my website?

I am in the process of creating my first website, and I am inspired by the Contact page design on this site(). Everything looks great until the screen size drops below 1000px - at that point, my button shifts to the right side and leaves some empty space o ...

htmlcss

How can you add draggable functionality to a Bootstrap dropdown menu?

My custom bootstrap dropdown design <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span cla ...

javascriptjquerycsstwitter-bootstrapjquery-ui

The React.js navigation bar hamburger menu refuses to close when toggled

Currently, my team and I have developed a react.js application together. The Navbar feature is functioning correctly, except for a small issue. When the Navbar is toggled using the Hamburger menu on a smaller screen, it opens successfully, but the toggle a ...

javascriptreactjsbootstrap-4

JavaScript's jQuery selector retrieves a child element from one location and adds it to a different

Why does the Jquery children selector select the img element, extract it, remove it, and then append it to another div element? Shouldn't it create a copy of the element being appended? var $anchors = $("#imageGallery a"); var $overlay = $('&l ...

javascriptjqueryhtmlcss

Creating background images in select tag using only CSS

I am interested in achieving the following task This is a selection drop down form that I need to work on Here is the code snippet: HMTL <select> <option>Country</option> <option>I ...

formscss

Ensure chip component (div) dynamically resizes its width to accommodate varying lengths of child text elements

I have a main container with two child elements (a text span and an image svg) created using the Material UI component library. My objective is to dynamically adjust the width of the chip based on the length of the text content inside it, while ensuring a ...

htmlcssreactjsmaterial-uistyled-components

Creating white space around the entire page using CSS is a simple yet effective way to

I'm relatively inexperienced with CSS and HTML and I'm attempting to create a website layout with some white space surrounding it, similar to a border. I have come across many solutions on removing white space, but none on how to add it. Current ...

htmlcss

Using @extend with numeric classes in Bootstrap 5: A step-by-step guide

I am looking to migrate some classes from Bootstrap 4 to 5 because some of the Bootstrap classes are no longer usable, especially in utilities. I am using SASS so I can utilize @extend for this process. https://i.sstatic.net/dEDCw.png For classes .text-l ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5