{"id":5940,"date":"2020-09-09T17:09:32","date_gmt":"2020-09-09T15:09:32","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?p=5940"},"modified":"2020-09-09T17:09:32","modified_gmt":"2020-09-09T15:09:32","slug":"how-to-correctly-align-different-image-sizes-in-flatsome","status":"publish","type":"post","link":"https:\/\/www.welaunch.io\/en\/2020\/09\/how-to-correctly-align-different-image-sizes-in-flatsome\/","title":{"rendered":"How to correctly align different image sizes in Flatsome"},"content":{"rendered":"

Add this custom CSS to make sure all product images are displayed correctly.<\/p>\n

.box-image img {\r\n\theight: auto !important;\r\n\tmax-width: 100%;\r\n\tpadding: 20px 10px 0 !important;;\r\n\tvertical-align: middle;\r\n\tmargin: auto !important;\r\n\tmax-height: 100%;\r\n\twidth: auto !important;\r\n}\r\n\r\n.box-image:hover img:first-child {\r\n\tdisplay: none !important;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"

Add this custom CSS to make sure all product images are displayed correctly. .box-image img { height: auto !important; max-width: 100%; padding: 20px 10px 0 !important;; vertical-align: middle; margin: auto !important; max-height: 100%; width: auto !important; } .box-image:hover img:first-child { display: none !important; }<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5940","post","type-post","status-publish","format-standard","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/5940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/comments?post=5940"}],"version-history":[{"count":1,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/5940\/revisions"}],"predecessor-version":[{"id":5941,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/5940\/revisions\/5941"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=5940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/categories?post=5940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/tags?post=5940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}