diff --git a/app/assets/stylesheets/images/show.css.scss b/app/assets/stylesheets/images/show.css.scss index fc0f52d..02a3a97 100644 --- a/app/assets/stylesheets/images/show.css.scss +++ b/app/assets/stylesheets/images/show.css.scss @@ -5,12 +5,6 @@ margin-top: 2rem; margin-bottom: 2rem; - grid-template-areas: - "image-container image-info" - "image-container image-info"; - grid-template-columns: 4fr 1fr; - grid-template-rows: 4fr 1fr; - .image-container { align-items: center; display: flex; @@ -28,6 +22,7 @@ } .image-tag { + font-size: 0.8rem; border-radius: 0.25rem; display: inline-block; background: white; @@ -45,3 +40,27 @@ padding: 0.5rem; } } + +@media (max-width: 799px) { + .show-image { + grid-template-areas: + "image-container" + "image-info"; + grid-template-rows: min-content min-content; + } + + .image-tags { + margin-top: 0; + margin-bottom: 0; + } +} + +@media (min-width: 800px) { + .show-image { + grid-template-areas: + "image-container image-info" + "image-container image-info"; + grid-template-columns: 4fr 1fr; + grid-template-rows: 4fr 1fr; + } +}