diff --git a/app/javascript/src/styles/common/z_responsive.scss b/app/javascript/src/styles/common/z_responsive.scss index c32414b1d..697d23eb0 100644 --- a/app/javascript/src/styles/common/z_responsive.scss +++ b/app/javascript/src/styles/common/z_responsive.scss @@ -199,9 +199,8 @@ #posts #posts-container { width: 100%; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1vw; + display: flex; + flex-wrap: wrap; align-items: center; justify-content: space-evenly; } @@ -212,8 +211,7 @@ text-align: center; vertical-align: middle; display: inline-block; - width: 100%; - container-type: inline-size; + width: 31vw; a { margin: 0 auto; @@ -221,7 +219,7 @@ img { max-height: 150px; - max-width: 100cqw; + max-width: 31vw; } .desc { @@ -231,11 +229,13 @@ .user-disable-cropped-false { article.post-preview { + width: 31vw; + img { height: auto; max-height: none; max-width: none; - width: 100cqw; + width: 31vw; &.has-cropped-false { object-fit: cover; @@ -314,13 +314,6 @@ } } } -@media screen and (max-width: 800px) and (horizontal-viewport-segments: 2) { - body.resp { - #posts #posts-container { - grid-template-columns: repeat(4, 1fr); - } - } -} @media screen and (max-width: 660px) { body.resp {