center tall but narrow images in product pages
authorAndrew Engelbrecht <andrew@fsf.org>
Wed, 31 Jul 2019 20:50:06 +0000 (16:50 -0400)
committerAndrew Engelbrecht <andrew@fsf.org>
Wed, 31 Jul 2019 20:50:06 +0000 (16:50 -0400)
there should have been a better way to do this that did not depend upon
removing "display: flex". there is even another part of the site where
we use that along with "align-items: center", and that works fine there,
but apparently not here. so i'm adding this workaround.

css/style.css

index f726dc4..ad459c8 100644 (file)
@@ -403,13 +403,14 @@ a { transition: 0.3s; }
 .page-node-type-product .product .field--name-field-image {
   padding: 10px;
 
-  display: flex;
-  align-items: center;
-
   border: 1px solid #888;
   border-radius: 10px;
 }
 
+.page-node-type-product .product .field--name-field-image img {
+  margin: 0 auto;
+}
+
 .page-node-type-product .product .field--name-field-extra-images {
   padding: 5px;