Bootstrap 4 Safari Images and text overlap

Question

The image and the text of the columns overlap. Maybe the height of the image is wrong or the image does not resize well.

This happens in safari browser on small screens with bootstrap 4.

I tried different solutions for the Bootstrap 4 Safari on Mac Grid issue but it does not help to solve the problem.

Example:

<html>
<head>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</script>
</head>
<body>
 <div id="Step0" style="margin-left:auto; margin-right:auto;" >
  <div class="container-fluid d-flex flex-column h-100 justify-content-between">
   <div class="row mt-5">
    <div class="col-12">
     <h1 class="text-center">My Awsome - Tutorial</h1>
    </div>
    <div class="col-12 mt-4">
     <h3 class="text-center">Welcome</h3>
    </div>
   </div>
   <div class="row">
    <div class="col-12">
     <p class="mx-5 text-center">
      Welcome to the esatus Wallet - Tutorial.
      <br>
      If you haven't installed the app allready you can donwload the App now for 
      iPhone or
      Android.
      <br><br>
      The tutorial has the follwoing topics.
     </p>
    </div>
    <div class="col-12 d-flex">
     <div class="mx-auto">
      <ul>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
      </ul>
     </div>
    </div>
    <div class="col-12 d-flex">
     <img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid">
    </div>
   </div>
   <div class="row justify-content-end mb-5">
    <div class="col-12 d-flex">
     <button href="#" type="button" class="invisible btn btn-primary m-auto invisible" >INVISBLE</button>
     <button href="#" type="button" class="btn btn-primary m-auto" onclick="return show('Step1','Step0');">Next</button>
    </div>
   </div>
  </div>
 </div>
</body>
</html>

score 0 · Accepted Answer · answered Feb 19 '20 at 13:43

You just have to use the class justify-content-center in the parent element of the image.

<html>
<head>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</script>
</head>
<body>
 <div id="Step0" style="margin-left:auto; margin-right:auto;" >
  <div class="container-fluid d-flex flex-column h-100 justify-content-between">
   <div class="row mt-5">
    <div class="col-12">
     <h1 class="text-center">My Awsome - Tutorial</h1>
    </div>
    <div class="col-12 mt-4">
     <h3 class="text-center">Welcome</h3>
    </div>
   </div>
   <div class="row">
    <div class="col-12">
     <p class="mx-5 text-center">
      Welcome to the esatus Wallet - Tutorial.
      <br>
      If you haven't installed the app allready you can donwload the App now for 
      iPhone or
      Android.
      <br><br>
      The tutorial has the follwoing topics.
     </p>
    </div>
    <div class="col-12 d-flex">
     <div class="mx-auto">
      <ul>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
      </ul>
     </div>
    </div>
    <div class="col-12 d-flex justify-content-center">
     <img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid">
    </div>
   </div>
   <div class="row justify-content-end mb-5">
    <div class="col-12 d-flex">
     <button href="#" type="button" class="invisible btn btn-primary m-auto invisible" >INVISBLE</button>
     <button href="#" type="button" class="btn btn-primary m-auto" onclick="return show('Step1','Step0');">Next</button>
    </div>
   </div>
  </div>
 </div>
</body>
</html>

Bootstrap 4 Safari Images and text overlap

1 Answers1