Browse Source

fixed stretch on image for the horizontal pattern

Maggie 3 years ago
parent
commit
b22bc65ae0

+ 5 - 0
quadrat/assets/theme.css

@@ -71,6 +71,10 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image {
 	margin-top: 0;
 }
 
+div.horizontal-query-pattern figure.wp-block-post-featured-image {
+	align-self: stretch;
+}
+
 @media (min-width: 600px) {
 	div.horizontal-query-pattern figure.wp-block-post-featured-image {
 		width: 57%;
@@ -81,6 +85,7 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img {
 	aspect-ratio: 1.12;
 	-o-object-fit: cover;
 	   object-fit: cover;
+	height: 100%;
 }
 
 @media (min-width: 600px) {

+ 1 - 1
quadrat/inc/patterns/query-episodes.php

@@ -22,7 +22,7 @@ return array(
 	<!-- /wp:group -->
 	<!-- /wp:post-template --></div>
 	<!-- /wp:query -->
-	<!-- wp:query {"queryId":34,"query":{"perPage":"1","pages":0,"offset":"2","postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"align":"wide"} -->
+	<!-- wp:query {"query":{"perPage":"1","pages":0,"offset":"2","postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"align":"wide"} -->
 	<div class="wp-block-query alignwide"><!-- wp:post-template -->
 
 	<!-- wp:group {"className":"horizontal-query-pattern","layout":{"type":"flex"}} -->

+ 2 - 0
quadrat/sass/block-patterns/_query.scss

@@ -28,6 +28,7 @@ div.horizontal-query-pattern {
 	}
 
 	figure.wp-block-post-featured-image {
+		align-self: stretch;
 		@include break-small() {
 			width: 57%; // I'm not sure why this number works but it does seem to!
 		}
@@ -36,6 +37,7 @@ div.horizontal-query-pattern {
 		img {
 			aspect-ratio: 1.12;
 			object-fit: cover;
+			height: 100%;
 
 			@include break-small() {
 				min-height: 360px;