طرح، فرست موبایل طراحی شده و مشکل در کوئری داره.
تصویر رو ببنید http://s3.img7.ir/tLloI.jpg
یا کروم مشکل داره یا من !!!! اصلا قابل پذیرش نیست توی رزولوشن 320 ، بیاد min-width من رو بخونه ! اگه 720px هم بجای 45em بگذارم، بازهم همین میشه.
مدیا کوئری ها...
الان اگه من از کوئری اولی که 45em هست صرف نظر کنم همه چیز درست میشه؛ طرح موبایل فرست میشه.
تصویر رو ببنید http://s3.img7.ir/tLloI.jpg
یا کروم مشکل داره یا من !!!! اصلا قابل پذیرش نیست توی رزولوشن 320 ، بیاد min-width من رو بخونه ! اگه 720px هم بجای 45em بگذارم، بازهم همین میشه.
مدیا کوئری ها...
کد:
@media screen and (min-width: 45em) {
.cards {
margin-top: -1em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
flex: 0 1 calc(50% - .5em);
}
}
@media screen and (min-width: 62em) {
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -1em;
}
.card {
flex: 0 1 calc(50% - .5em);
}
}
@media screen and (min-width: 75em) {
.cards {
margin-top: inherit;
}
.card {
flex: 0 1 calc(33% - 1em);
}
}
آخرین ویرایش: