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