(Finally) container queries for masonry items.
This commit is contained in:
parent
e7791f0500
commit
6c37dce230
|
@ -244,24 +244,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.tainacan-masonry-container--legacy) {
|
&:not(.tainacan-masonry-container--legacy) {
|
||||||
column-count: 7;
|
column-count: 8;
|
||||||
|
|
||||||
@media screen and (max-width: 2560px) {
|
@media screen and (max-width: 2380px) {
|
||||||
|
column-count: 7;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1980px) {
|
||||||
column-count: 6;
|
column-count: 6;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1920px) {
|
@media screen and (max-width: 1480px) {
|
||||||
column-count: 5;
|
column-count: 5;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1740px) {
|
@media screen and (max-width: 1240px) {
|
||||||
column-count: 4;
|
column-count: 4;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1440px) {
|
@media screen and (max-width: 940px) {
|
||||||
column-count: 3;
|
column-count: 3;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1024px) {
|
@media screen and (max-width: 720px) {
|
||||||
column-count: 2;
|
column-count: 2;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 620px) {
|
@media screen and (max-width: 380px) {
|
||||||
column-count: 1;
|
column-count: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,13 +28,13 @@
|
||||||
@container (max-width: 1920px) {
|
@container (max-width: 1920px) {
|
||||||
width: calc(25% - 30px);
|
width: calc(25% - 30px);
|
||||||
}
|
}
|
||||||
@container (max-width: 1360px) {
|
@container (max-width: 1320px) {
|
||||||
width: calc(33.333% - 30px);
|
width: calc(33.333% - 30px);
|
||||||
}
|
}
|
||||||
@container (max-width: 1024px) {
|
@container (max-width: 1000px) {
|
||||||
width: calc(50% - 30px);
|
width: calc(50% - 30px);
|
||||||
}
|
}
|
||||||
@container (max-width: 768px) {
|
@container (max-width: 740px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -245,7 +245,7 @@
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
column-gap: 30px;
|
column-gap: 30px;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
column-count: 5;
|
column-count: 6;
|
||||||
|
|
||||||
.skeleton {
|
.skeleton {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -254,15 +254,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 2560px) {
|
@media screen and (max-width: 2560px) {
|
||||||
column-count: 4;
|
column-count: 5;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1920px) {
|
@media screen and (max-width: 1920px) {
|
||||||
|
column-count: 4;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1320px) {
|
||||||
column-count: 3;
|
column-count: 3;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1360px) {
|
@media screen and (max-width: 1000px) {
|
||||||
column-count: 2;
|
column-count: 2;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1024px) {
|
@media screen and (max-width: 748px) {
|
||||||
column-count: 1;
|
column-count: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue