My modals are responsive on screen but not on mobile

Marta Wierzbicka staff answered 6 years ago

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

Add comment

Melinda Beavers pro answered 6 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.

Add comment

Marta Wierzbicka staff answered 6 years ago

1 0 Best answer

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

Add comment

Melinda Beavers pro answered 6 years ago

0 0 Best answer

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

Add comment

Melinda Beavers pro answered 6 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Best, Marta

Add comment

Melinda Beavers pro answered 6 years ago

1 0 Best answer

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.

<strong>Modal not resizing responsively for iphone</strong>
<img src="http://blue-sky-road.com/images/not-working-iphone6-screenshot.png" alt="Modal not resizing responsively for iphone" />

<strong>Modal is working responsively in browser on mac</strong>
<img src="http://blue-sky-road.com/images/working-chrome-on-mac-screenshot.png" alt="Modal is working responsively in browser on mac" />

<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>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/mdb.min.css" rel="stylesheet">
    
    <link href="css/style.css" rel="stylesheet">
</head>

<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>

<div class="container">
        <div class="row">
            
            <div class="col-lg-3 col-md-6 col-sm-12">

<div class="face front">

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

<div class="card-block">
								
								<a class="rotate-btn" data-card="card1" name="card1-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>

<div class="face back">

<h4>CARD 1</h4>
							<hr>

<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>

</div>
				</div>
				 
				</div>
            
             
            <div class="col-lg-3 col-md-6 col-sm-12">

<div class="face front">

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

<div class="card-block">
								
								<a class="rotate-btn" data-card="card2" name="card2-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>

<div class="face back">

<h4>CARD 2</h4>
							<hr>

<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>

</div>
				</div>
				 
				</div>   
       
            
            <div class="col-lg-3 col-md-6 col-sm-12">

<div class="face front">

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

<div class="card-block">
								
								<a class="rotate-btn" data-card="card3" name="card3-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>

<div class="face back">

<h4>CARD 3</h4>
							<hr>

<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>

</div>
				</div>
				 
				</div>        
 
            
            <div class="col-lg-3 col-md-6 col-sm-12">

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

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

<div class="card-block">
								
								<a class="rotate-btn" data-card="card4" name="card4-change-link" ><i class="fa fa-repeat"></i> change</a>
								
							</div>
						</div>

<div class="face back">

<h4>CARD 4</h4>
							<hr>

<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>

</div>
				</div>
				 
				</div>                                              
                                                                            
                                                                                                          
                                                                                                                                        
                                                                                                                                                                      
                                                                                                                                                                                                                                  
                                               
        </div>
    </div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    
    <script type="text/javascript" src="js/tether.min.js"></script>
    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="js/mdb.min.js"></script>
</body>

</html>
</code></pre>

Please insert min. 20 characters.

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


<!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>

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

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

Add comment

xardonik free answered 6 years ago

3 0 Best answer

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 4 years ago

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

Nazmul Hoque free commented 3 years ago

Thanks. Its help me and solve my Problem

Add comment