Update: try to make images look better on mobile
This commit is contained in:
parent
6cabe4e79b
commit
0d56598e01
2 changed files with 6 additions and 14 deletions
|
@ -451,26 +451,22 @@ body {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (min-width: 400px) and (max-width: 800px) {
|
||||
.search-bar {
|
||||
display: none;
|
||||
}
|
||||
.artwork-thumbnail-small {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 400px) and (max-width: 800px) {
|
||||
/* 400px <= device width <= 800px */
|
||||
.artwork-mobile {
|
||||
width: 47.4%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
.artwork-mobile {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
width: 47%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -526,7 +526,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (min-width: 400px) and (max-width: 800px) {
|
||||
.search-bar {
|
||||
display: none;
|
||||
}
|
||||
|
@ -534,13 +534,11 @@ body {
|
|||
.artwork-thumbnail-small {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 400px) and (max-width: 800px) {
|
||||
/* 400px <= device width <= 800px */
|
||||
.artwork-mobile {
|
||||
width: 47.4%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -548,8 +546,6 @@ body {
|
|||
.artwork-mobile {
|
||||
// width: 94vw;
|
||||
// height: 94vw;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
width: 47%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue