Мне интересно, может ли кто-нибудь объяснить мне, почему карточки на моем веб-сайте отображаются на iPad иначе, чем на рабочем столе.
Я также добавил в начало HTML документ, чтобы указать, что он имеет ширину экрана iPad.
Я также пытался изменить стиль отображения на встроенный блок, но это не устранило мою проблему.
Любая помощь был бы очень признателен
Bootstrap веб-сайт на iPad
Веб-сайт Boostrap на рабочем столе
body {
font-family :Georgia;
margin:auto;
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+ */
}
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;
}