{"id":653,"date":"2024-02-26T10:31:16","date_gmt":"2024-02-26T10:31:16","guid":{"rendered":"https:\/\/helpcenter.greyd.io\/2023\/08\/04\/same-height\/"},"modified":"2024-12-26T18:27:53","modified_gmt":"2024-12-26T17:27:53","slug":"same-height","status":"publish","type":"post","link":"https:\/\/helpcenter.greyd.io\/same-height\/","title":{"rendered":"How can I stretch elements to the same height?"},"content":{"rendered":"<p>When having several content boxes or texts in columns next to each other, often the layout is tricky when these elements do not have the same height (e.g. because of different text lengths). However, we offer several ways to make sure, your content looks good:<\/p>\n<ul>\n<li><b>Headline &amp; Paragraph Block<\/b><\/li>\n<\/ul>\n<p>In the headline &amp; paragraph block we have added an option that enables you to force each block to have the same number of lines, even if the texts have different lenghts:<\/p>\n<figure class=\"\" style=\"width: 39.8634%;max-width: 100%\">\n        <img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/64ccb484eb931e0627da71c7\/file-SAoN9h3Y0Y.png\" alt=\"Backend screenshot showing the\"><figcaption>Backend screenshot showing the &#8220;text lines&#8221; options in the paragraph &amp; headline block<\/figcaption><\/figure>\n<p>Backend screenshot showing the &quot;Text Lines&quot; option, available in heading &amp; paragraph blocks.<\/p>\n<ul>\n<li><b>Content Boxes<\/b><\/li>\n<\/ul>\n<p>When working with several content boxes next to each other, you can work with minimum heights to make sure that all boxes have the same height even when filled with shorter content &#8211; even individually per breakpoint. Just set the size of the biggest contentbox on each breakpoint as the minimum height for all other boxes.<\/p>\n<figure style=\"width: 50.0001%;max-width: 100%\" class=\"\">\n        <img decoding=\"async\" alt=\"Backend screenshot showing the minimum &amp; maximum height option for content boxes\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/64ccb4bdeb931e0627da71c8\/file-j5sUTF9PWM.png\" \/><figcaption>Backend screenshot showing the minimum &amp; maximum height option for content boxes<\/figcaption><\/figure>\n<ul>\n<li><b>Columns<\/b><\/li>\n<\/ul>\n<p>In the advanced settings of the columns block, you will find an option to stretch elements placed in that column to the same height.<\/p>\n<figure class=\"\" style=\"width: 51.7593%;max-width: 100%\">\n        <img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/64ccb5639c7e7464d56af304\/file-sBcKAsSbXh.png\" alt=\"Backend screenshot of the columns block showing the\"><figcaption>Backend screenshot of the columns block showing the &#8220;stretch to same height&#8221; option<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>When having several content boxes or texts in columns next to each other, often the layout is tricky when these elements do not have the same height (e.g. because of different text lengths). However, we offer several ways to make sure, your content looks good: Headline &amp; Paragraph Block In the headline &amp; paragraph block [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"greyd_block_editor_preview":[],"footnotes":""},"categories":[1],"tags":[163,84,160,159,162,161],"topics":[578,582],"class_list":["post-653","post","type-post","status-publish","format-standard","hentry","category-general","tag-bild","tag-contentbox","tag-gleiche-hohe","tag-height","tag-icon","tag-text","topics-design","topics-greyd-blocks"],"lang":"en","translations":{"en":653,"de":2707},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/comments?post=653"}],"version-history":[{"count":1,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/653\/revisions"}],"predecessor-version":[{"id":4736,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/653\/revisions\/4736"}],"wp:attachment":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/media?parent=653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/categories?post=653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/tags?post=653"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/topics?post=653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}