danbarber/my-images
1
0
Fork 0
mirror of https://github.com/danbee/my-images synced 2025-03-04 08:49:05 +00:00
Code Issues Releases Wiki Activity

Add layout for narrow screens

Browse Source
This commit is contained in:
Daniel Barber 2018-08-25 19:36:29 -04:00
parent 44b60993ab
commit 74284024c8
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
1 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/stylesheets/images/show.css.scss
View File

@ -5,12 +5,6 @@
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 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 { .image-container {
align-items: center; align-items: center;
display: flex; display: flex;
@ -28,6 +22,7 @@
} }
.image-tag { .image-tag {
font-size: 0.8rem;
border-radius: 0.25rem; border-radius: 0.25rem;
display: inline-block; display: inline-block;
background: white; background: white;
@ -45,3 +40,27 @@
padding: 0.5rem; 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;
}
}