Could someone please help me understand why the cards on my website appear differently on an iPad compared to a desktop?
I have added
<meta name="viewport" content="width=device-width">I also attempted to change the display style to inline-block, but that did not resolve the issue.
Any assistance would be greatly appreciated.
View Bootstrap website on iPad
View Boostrap website on Desktop
body {
font-family :Georgia;
margin:auto;
background: #009FFF;
}
article{
text-align: center;
padding: 15px;
}
.navContainer{
background-color: #b3b3b3;
padding-left: 8px;
}
.point {
font-size: 30px;
cursor: pointer;
}
.hideNav{
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;}
}
.row{
display: block;
margin-left: 270px;
width: 10%;
}
.card-block{
background-color: #3C3C3A;
overflow: hidden;
border-style: hidden;
}
.card-title, .card-text{
color:white;
}
.abouttitle{
color: white;
}