How can I stop Modal from moving vertically on mobile devices?

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered justify-content-center" id="modalInner" role="document">
    <div id="innerContentWrapper">
      <a class="prev">&#10094;</a>
      <a class="next">&#10095;</a>

      <div id="innerContent"></div>
    </div>
  </div>
</div>

Utilizing a bootstrap mobile for creating a lightbox gallery can be tricky. Users have reported the modal jumping up and down when swiping on mobile devices. How can I ensure it stays fixed in place?

cssbootstrap-4

Answer №1

One solution is to adjust its placement within a media query designed for mobile devices:

@media only screen and (max-width: 768px) {
 .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  }
}

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

Arrange buttons and input fields within Dash in a cohesive layout

I'm currently developing a Dash application and I need to align two input fields and two buttons in two separate rows. I want the button 'Download ClinicalTrial.gov info' to be placed alongside the input 'Insert the filename for RCT inf ...

pythonhtmlcssplotly-dash

Position the Material UI Box element to the bottom of its parent container

Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...

cssreactjsmaterial-ui

The visibility of the Bootstrap modal may vary depending on the version of Bootstrap being used

I am new to web programming and utilized various Twitter Bootstrap templates to build my website. The login page displays Bootstrap modals correctly with the following imports: <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="styles ...

javascriptjqueryhtmlcsstwitter-bootstrap

Switching the navigation drop down from hover to click: A step-by-step guide

I'm currently designing a responsive navigation bar with a dropdown feature that expands on hover. However, I've encountered an issue as this hover effect is not ideal for mobile devices. Therefore, I am looking to modify my navigation bar so tha ...

htmlcssdrop-down-menuresponsive-designnav

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

My code changes the navbar colors when I scroll (200ms). However, I would like the changes to occur when I am slightly above the next section, not immediately. In other words, what adjustments should I make to change the color in the next section and not ...

javascriptjquerycssscrollnavbar

Display an HTML code snippet on the webpage

I'm facing a situation that has been discussed before on this platform. However, I want to present my problem in a different light. I am working with PHP and need to display an HTML string from the database on my webpage. The issue is that the CSS app ...

htmlcss

What is the correlation between $container-max-width and $grid-breakpoint in Bootstrap version 4?

Query: I am working with Bootstrap v4 in a project and I am curious about the connection between the default values assigned to the keys in the $container-max-width and $grid-breakpoint SASS maps. Is there a correlation between them in Bootstrap v4? Bac ...

csstwitter-bootstrapsassgridtwitter-bootstrap-4

Issues with padding in the h1 title of a mobile website

I am currently working on creating a mobile-friendly version of a website. However, I am facing an issue where the background image set for an H1 title is only taking into account the "text height" and not the actual picture height specified in the CSS. A ...

htmlcssmobiletitle

Any ideas on how to achieve a text overflow effect with css?

Is there a way to create a text overflow effect? I'm currently displaying information in an MUI Card with a fixed width. Below is the code snippet: cardContent: { fontWeight: 700, color: "#0E0E0E", fontSize: "16px", ...

cssmaterial-ui

Limit the number of words in an HTML input box

Is it possible to set a maximum word limit for a textbox that a user can input, rather than limiting the number of characters? I did some research and discovered a way to determine the number of words a user has entered using regular expressions, but I& ...

javascriptjqueryhtmlcss

Is there a way to customize the appearance of the current slide in slick.js with jQuery?

I am looking to customize the appearance of the currently active slide by giving it an orange border. Keep in mind that the class for the active slide is : slick-active and the structure is as follows : <div class='slick-slide slick-active' ...

jquerycssslick.js

Create a Sleek Dropdown Navigation Menu with MaterializeCSS in WordPress

I am having trouble displaying the dropdown menu on my WordPress website. How can I make sure the dropdown menu appears properly? functions.php register_nav_menus( array( 'primary' => __( 'Primary Menu', 'TNCTR-OnePage' ) ...

javascriptjqueryhtmlcsswordpress

What is the best way to add animation to my Navigation Button and ensure it performs the correct animation with JavaScript?

Can someone help me understand why my burger div (navigation button on mobile) is not animating to form an X shape? I've tried using JavaScript to toggle the class name but it doesn't animate the lines at 45 degrees. Any insights on what I might ...

javascripthtmlcss

The adjustment in margin triggers a ripple effect on several div elements

My goal is to make my logo image move up on hover without affecting the text below it. However, I'm facing an issue where both elements are triggered simultaneously even though they are in different divs wrapped in a parent div. It seems like there mi ...

jqueryhtmlcssmargin

How to Style Bootstrap 4 Tables with Rounded Borders

Currently, I am in the process of enhancing the design of a Bootstrap 4 table within a Node application using handlebars (.hbs). While I have been able to adjust the width of the table with CSS, I am encountering challenges in creating the desired borders ...

htmlcsshandlebars.jsbootstrap-4

Having difficulty defining the dropdown boundary in Bootstrap 5

Previously, I had this code working perfectly in Bootstrap 4. <div class="dropdown"> <span type="button" class="dropdown" data-toggle="dropdown" data-boundary="viewport"> <img src ...

htmlcsstwitter-bootstrapbootstrap-5

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

One of my challenges involves a parent DIV with a width set to 100%. Dynamically, this parent DIV is filled with numerous children DIVs. I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex ...

javascripthtmlcssd3.jsless

Watching a VideoJS video does not pause even after closing a Bootstrap modal

I am struggling with a modal on my website that contains a video. Even when I close the modal by clicking outside of it or using the close button, the video continues to play in the background. I have tried all the solutions I could find on stackoverflow ...

javascripthtmlvideobootstrap-4video.js

Enhance the appearance of a custom checkbox component in Angular

I developed a customized toggle switch for my application and integrated it into various sections. Recently, I decided to rework it as a component. However, I am encountering an issue where the toggle switch button does not update in the view (it remains t ...

cssangulartypescripttoggle

How can the color of unselected mat-steps be customized in Angular?

In my CSS code, I have specified the styling for the selected mat-step as follows: ::ng-deep .mat-step-header .mat-step-icon-selected { background-color: #a94442; } While this code works well, I encountered a need to update only certain blue icons: ...

cssangular-materialmat-stepper