silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move image-row height and col to media queries to adjust with viewport

This commit is contained in:
Jess 2019-02-11 09:00:43 -08:00 committed by Maruan
parent 488cb39f9c
commit 65b661ce6e
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_sass/_gallery.scss
View File

@ -11,7 +11,7 @@ figcaption {
background: $theme-color; background: $theme-color;
} }
.img_row { .img_row {
height: $img-height; /*height: $img-height;*/
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
box-sizing:border-box; box-sizing:border-box;
@ -21,7 +21,7 @@ figcaption {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
box-sizing:border-box; box-sizing:border-box;
padding: $img-spacing; /*padding: $img-spacing;*/
} }
.one { .one {
width:33.33%; width:33.33%;

18
_sass/_media-queries.scss
View File

@ -47,18 +47,36 @@
.social-icons-right { .social-icons-right {
text-align: right; text-align: right;
} }
.img_row {
height: $img-height/3;
}
.col {
padding: $img-spacing/3;
}
} }
@media screen and (min-width: $viewport-medium) { @media screen and (min-width: $viewport-medium) {
html { html {
font-size: 18px; font-size: 18px;
} }
.img_row {
height: $img-height/1.5;
}
.col {
padding: $img-spacing/1.5;
}
} }
@media screen and (min-width: $viewport-large) { @media screen and (min-width: $viewport-large) {
html { html {
font-size: 20px; font-size: 20px;
} }
.img_row {
height: $img-height;
}
.col {
padding: $img-spacing;
}
} }
@media screen and (min-width: $viewport-large + 14) { @media screen and (min-width: $viewport-large + 14) {