From 63be0bf6504c904551dc847eade27bbe1a734d3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Wed, 17 Mar 2021 16:38:53 +0100 Subject: [PATCH] Make feature image have consistent 21:9 aspect ratio --- assets/css/screen.css | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index bb11ac8..044f8bb 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -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; }