remove width:10%; at .row class
Solution 1 :
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
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;
}