Solution 1 :

remove width:10%; at .row class

Problem :

I am wondering if anyone can provide me with an explaination, as to why the cards on my website displays differently on the iPad compared to the desktop.

I have also added to the start of the HTML document to tell it to have the width of the iPad screen.

I also tried to change the display style to inline-block, but this didn’t fix my issue.

Any help would be greatly appreciated

Bootstrap website on iPad

Boostrap website on Desktop

body {
  font-family :Georgia;
  background: #009FFF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ec2F4B, #009FFF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ec2F4B, #009FFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


  text-align: center;
  padding: 15px;

  background-color: #b3b3b3;
  padding-left: 8px;

.point {
  font-size: 30px;
  cursor: pointer;

  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  opacity: 0.9;

.hideNav a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;

.hideNav a:hover{
  color: #f1f1f1;

.hideNav .btnClose {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;

@media screen and (max-height: 450px) {
  .hideNav{padding-top: 15px;}
  .hideNav a {font-size: 18px;}

 display: block;

  margin-left: 270px;
  width: 10%;


background-color: #3C3C3A;
overflow: hidden;

  border-style: hidden;

.card-title, .card-text{

  color: white;