WebDev
/
mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Make feature image have consistent 21:9 aspect ratio

This commit is contained in:
Bea 2021-03-17 16:38:53 +01:00
parent 1a5be0c2c6
commit 63be0bf650
1 changed files with 3 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/screen.css
View File

@ -699,9 +699,9 @@ instead of pages ".mind-page*".
}
img.mind-post_feature-image {
max-height: 400px;
width: 100%;
object-fit: cover;
max-height: 360px; /* 21:9 aspect ratio */
/*
TODO: see .mind-post_content-header.
@ -1214,7 +1214,7 @@ Media queries are used to make the website responsive and cool on mobile.
}
img.mind-post_feature-image {
max-height: 350px;
max-height: 29vw; /* 21:9 aspect ratio */
}
.kg-gallery-image {
@ -1294,7 +1294,7 @@ Media queries are used to make the website responsive and cool on mobile.
}
img.mind-post_feature-image {
max-height: 500px;
max-height: 42.857vw; /* 21:9 aspect ratio */
}
.kg-gallery-image {
@ -1339,10 +1339,6 @@ Media queries are used to make the website responsive and cool on mobile.
.mind-tag-content_main {
grid-template-columns: 1fr 1fr 1fr;
}
img.mind-post_feature-image {
max-height: 350px;
}
}
@media only screen and (max-width: 650px) {
@ -1399,10 +1395,6 @@ Media queries are used to make the website responsive and cool on mobile.
font-size: 15px;
}
img.mind-post_feature-image {
max-height: 300px;
}
.mind-post_info {
font-size: 13px;
}
@ -1478,10 +1470,6 @@ Media queries are used to make the website responsive and cool on mobile.
font-size: 14px;
}
img.mind-post_feature-image {
max-height: 250px;
}
.mind-site-footer_main {
font-size: 16px;
}