Topic: My modals are responsive on screen but not on mobile

Melinda Beavers pro asked 5 years ago


I have this meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> in my code but my modals are not acting responsively on mobile devices. It works fine when i shrink the screen on a laptop browser but on the mobile device, the modal is wider than the screensize and appears up at the top of the page and you have to scroll back up to the top of the page to know that its even there. All of the example modals on this page https://mdbootstrap.com/javascript/modals do work appropriately on my device.

Marta Wierzbicka staff answered 5 years ago


Hi Melinda, no problem, I'm glad you see your modals correct now. Best, Marta

Melinda Beavers pro answered 5 years ago


Geez, you are correct Marta. I tried with another phone (iOS 10.3.2) and it is working fine. My phone is a version behind that but I am upgrading now. Thank you so much and i apologize for not checking that earlier. My bad.

Marta Wierzbicka staff answered 5 years ago


On your website modal also works correct. I can't recreate your problem, look at th screen: iphone6

Melinda Beavers pro answered 5 years ago


I put the test-modal.html code and MDB Pro up at this url: http://blue-sky-road.com/MDB%20Pro/test-modal.html, can you check it with your iphone Marta or Bartłomiej Malanowski

Melinda Beavers pro answered 5 years ago


Hi Marta, I am using Version: MDB Pro 4.3.2.

Marta Wierzbicka staff answered 5 years ago


Hi, could you tell me what the exact version of MDB you have (you can find this in README.txt file) ? Because modals from your code display correct on my iPhone 6 and iPhone 5 iPhone6 iPhone5 Best, Marta

Melinda Beavers pro answered 5 years ago


xardonic and Bartlomiej, adding the additional meta did not make a difference. I think i narrowed down the problem to a switch component on the back of rotating cards. If I remove that component, it works responsively when i resize my browser window and works just fine on my iphone6. I have attached my code example and a screenshot as requested. We really do want to use the switch and the rotating cards so I'm hoping you can help me get it working! Attached below are two images, the first one is the iphone 6 with how the modal looks. if you press the details button the modal opens but it doesn't resize to fit the screen and if you are near the bottom of the page the modal opens all the way at the top of the screen and you have to scroll up to see it. The second image is how it looks in Chrome on mac, works responsively in all browsers on mac. Modal not resizing responsively for iphone Modal not resizing responsively for iphone Modal is working responsively in browser on mac Modal is working responsively in browser on mac

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Test Modal</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
<div id="details" class="modal fade" role="dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog  modal-lg" role="document">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Offer Details</h4>
      </div>
      <div class="modal-body">
	  <p>Ipsum lorem....</p>
      </div>      
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
   
   

   
    <!-- Start your project here-->
    <div class="container">
        <div class="row">
            <!--First columnn-->
            <div class="col-lg-3 col-md-6 col-sm-12">

				 <div class="card-wrapper">
					<div id="card1" class="card-rotating effect__click">

						<!--Front Side-->
						<div class="face front">

							<!-- Image-->
							<div class="card-up" >
							<p>&nbsp;</p>
							<p style="text-align: center; font-family: Arial; font-size: 45px">card 1</p>
							</div>

							<!--Content-->
							<div class="card-block">
								<!--Triggering button-->
								<a class="rotate-btn" data-card="card1" name="card1-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>
						<!--/.Front Side-->

						<!--Back Side-->
						<div class="face back">

							<!--Content-->
							<h4>CARD 1</h4>
							<hr>

							
							  <div class="switch">
								<label>
								  No
								  <input id="includeusers" type="checkbox" checked>
								  <span class="lever"></span>
								  Yes
								</label>
							  </div>
							
							<!--Triggering button-->

							<p>&nbsp;</p>							
							<p>&nbsp;</p>
							<p>&nbsp;</p>
							<a class="rotate-btn" data-card="card1" name="card1-save-link" ><i class="fa fa-undo"></i> save</a>
							
							
							<p>&nbsp;</p><p><a href="#" data-toggle="modal" data-target="#details">details</a></p>

						</div>
						<!--/.Back Side-->

					</div>
				</div>
				<!--/.Rotating card--> 
				</div>
            
             <!--second columnn-->
            <div class="col-lg-3 col-md-6 col-sm-12">

				 <div class="card-wrapper">
					<div id="card2" class="card-rotating effect__click">

						<!--Front Side-->
						<div class="face front">

							<!-- Image-->
							<div class="card-up" >
							<p>&nbsp;</p>
							<p style="text-align: center; font-family: Arial; font-size: 45px">card 2</p>
							</div>

							<!--Content-->
							<div class="card-block">
								<!--Triggering button-->
								<a class="rotate-btn" data-card="card2" name="card2-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>
						<!--/.Front Side-->

						<!--Back Side-->
						<div class="face back">

							<!--Content-->
							<h4>CARD 2</h4>
							<hr>

							
							  <div class="switch">
								<label>
								  No
								  <input id="includecalling" type="checkbox" checked>
								  <span class="lever"></span>
								  Yes
								</label>
							  </div>
							
							<!--Triggering button-->

							<p>&nbsp;</p>							
							<p>&nbsp;</p>
							<p>&nbsp;</p>
							<a class="rotate-btn" data-card="card2" name="card2-save-link" ><i class="fa fa-undo"></i> save</a>
							
							
							<p>&nbsp;</p><p><a href="#" data-toggle="modal" data-target="#details">details</a></p>

						</div>
						<!--/.Back Side-->

					</div>
				</div>
				<!--/.Rotating card--> 
				</div>   
       
            <!--third columnn-->
            <div class="col-lg-3 col-md-6 col-sm-12">

				 <div class="card-wrapper">
					<div id="card3" class="card-rotating effect__click">

						<!--Front Side-->
						<div class="face front">

							<!-- Image-->
							<div class="card-up" >
							<p>&nbsp;</p>
							<p style="text-align: center; font-family: Arial; font-size: 45px">card 3</p>
							</div>

							<!--Content-->
							<div class="card-block">
								<!--Triggering button-->
								<a class="rotate-btn" data-card="card3" name="card3-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>
						<!--/.Front Side-->

						<!--Back Side-->
						<div class="face back">

							<!--Content-->
							<h4>CARD 3</h4>
							<hr>

							
							  <div class="switch">
								<label>
								  No
								  <input id="includemessaging" type="checkbox" checked>
								  <span class="lever"></span>
								  Yes
								</label>
							  </div>
							
							<!--Triggering button-->

							<p>&nbsp;</p>							
							<p>&nbsp;</p>
							<p>&nbsp;</p>
							<a class="rotate-btn" data-card="card3" name="card3-save-link" ><i class="fa fa-undo"></i> save</a>
							
							
							<p>&nbsp;</p><p><a href="#" data-toggle="modal" data-target="#details">details</a></p>

						</div>
						<!--/.Back Side-->

					</div>
				</div>
				<!--/.Rotating card--> 
				</div>        
 
            <!--fourth columnn-->
            <div class="col-lg-3 col-md-6 col-sm-12">

				 <div class="card-wrapper">
					<div id="card4" class="card-rotating effect__click">

						<!--Front Side-->
						<div class="face front" style="background-size: 100% 100%; ">

							<!-- Image-->
							<div class="card-up" >
							<p>&nbsp;</p>
							<p style="text-align: center; font-family: Arial; font-size: 45px">card 4</p>
							</div>

							<!--Content-->
							<div class="card-block">
								<!--Triggering button-->
								<a class="rotate-btn" data-card="card4" name="card4-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>
						<!--/.Front Side-->

						<!--Back Side-->
						<div class="face back">

							<!--Content-->
							<h4>CARD 4</h4>
							<hr>

							
							  <div class="switch">
								<label>
								  No
								  <input id="includesolution" type="checkbox" checked>
								  <span class="lever"></span>
								  Yes
								</label>
							  </div>
							
							<!--Triggering button-->

							<p>&nbsp;</p>							
							<p>&nbsp;</p>
							<p>&nbsp;</p>
							<a class="rotate-btn" data-card="card4" name="card4-save-link" ><i class="fa fa-undo"></i> save</a>
							
							
							<p>&nbsp;</p><p><a href="#" data-toggle="modal" data-target="#details">details</a></p>

						</div>
						<!--/.Back Side-->

					</div>
				</div>
				<!--/.Rotating card--> 
				</div>                                              
                                                                            
                                                                                                          
                                                                                                                                        
                                                                                                                                                                      
                                                                                                                                                                                                                                  
                                               
        </div>
    </div>
    <!-- /Start your project here-->

    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/tether.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
</body>

</html>


Hi, Melinda! Please provide us more details. What's your device? Could you please provide us a screenshot?

xardonik free answered 5 years ago


Could you try add to your meta content this: "maximum-scale=1, user-scalable=no" and now your code is <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no”>. If not help please give us your code.

Abubakkar Khan free commented 2 years ago

you are providing exactly what i want it,s help me thank you very much


Nazmul Hoque free commented 1 year ago

Thanks. Its help me and solve my Problem



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No