Equal Height Columns
-
Hi I need help setting an equal height for two or more columns placed side by side.
- Here are a couple of examples:
2 columns text + image
3 columns only text
https://www.giacominiclima.it/pompe-di-calore/ - While here you will find a video + image:
https://www.giacominiclima.it/riscaldamento-industriale/
I tried both with your plugin and with CSS but I can’t do it.
Can anyone help me?
Thank youThe page I need help with: [log in to see the link]
- Here are a couple of examples:
Viewing 4 replies - 1 through 4 (of 4 total)
-
I just tried to replicate a couple of your sections and here’s what you can try, that might help.
- Reset the “align-top” option from the top toolbar on the column/columns block.
2. Reset the height from EditorPlus settings.
Hope this helps.
If it helps, I can send you the code of a page:
<!-- wp:columns {"verticalAlignment":"top","align":"full","className":"eplus-hVS4qA ep-custom-column","epStylingOptions":{"epCustomColumnsResponsiveEnabled":true,"epCustomColumnsReverseResponsiveEnabled":true,"epCustomColumnsSpacingResponsiveEnabled":true,"epCustomColumns":{"target":"wp-block-column","responsive":true,"hover":false,"options":[{"custom":true,"control":"ColumnToggle"},{"label":"Responsive Columns","control":"Range","attribute":"epCustomColumns","defaults":{"tablet":"2","mobile":"1"},"css":"flex-basis","customValue":"calc(( 100% - ({{Range:epCustomColumnsSpacing:auto:0px}} * ({{value}} - 1))) / {{value}}) !important","props":{"max":6,"min":1,"supportedUnits":[]},"condition":{"query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"},[{"relation":"OR","query":[{"field":"viewport","compare":"EQUAL","value":"tablet"},{"field":"viewport","compare":"EQUAL","value":"mobile"}]}]]}}]},"epCustomColumnsReverse":{"target":"","responsive":true,"hover":false,"options":[{"label":"Columns Order","control":"ButtonGroup","attribute":"epCustomColumnsReverse","css":"flex-direction","customValue":"{{value}}","condition":{"relation":"AND","query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"},[{"relation":"OR","query":[[{"relation":"AND","query":[{"field":"attributes.epCustomColumns.mobile","controlledBy":"Range","compare":"IN","value":"1"},{"field":"viewport","compare":"EQUAL","value":"mobile"}]}],[{"relation":"AND","query":[{"field":"attributes.epCustomColumns.tablet","controlledBy":"Range","compare":"IN","value":"1"},{"field":"viewport","compare":"EQUAL","value":"tablet"}]}]]}]]},"defaults":{"tablet":"column","mobile":"column"},"props":{"layout":"stacked","options":[{"label":"Default","value":"column"},{"label":"Reverse","value":"column-reverse"}]}}]},"epCustomColumnsSpacing":{"target":"","responsive":true,"hover":false,"options":[{"label":"Columns Gap","control":"Range","attribute":"epCustomColumnsSpacing","defaults":{"desktop":"32px","tablet":"32px","mobile":"32px"},"css":"gap","props":{"max":100,"min":0,"supportedUnits":["px"]},"condition":{"query":[{"field":"attributes.className","compare":"IN","value":"ep-custom-column"}]}}]},"savedStyling":".eplus_styles .wp-block[data-block=\u00229b4c49d7-5e92-4b8d-9468-c639a43cdedc\u0022] {\n \n gap: 52px !important;\n }\n \n\n \n\n \n\n \n \n\n \n\n\n \n\n @media (max-width: 981px) {\n .eplus_styles .wp-block[data-block=\u00229b4c49d7-5e92-4b8d-9468-c639a43cdedc\u0022] {\n gap: 32px ;\n }\n }\n\n \n\n \n \n @media (max-width: 600px) {\n .eplus_styles .wp-block[data-block=\u00229b4c49d7-5e92-4b8d-9468-c639a43cdedc\u0022] {\n gap: 32px ;\n }\n }","clientId":"9b4c49d7-5e92-4b8d-9468-c639a43cdedc"},"epCustomColumns":{"desktop":{"value":"","important":false,"unit":"%"},"tablet":{"value":2,"important":false,"unit":""},"tabletModified":true,"mobile":{"value":1,"important":false,"unit":""},"mobileModified":true},"epCustomColumnsSpacing":{"desktop":{"value":52,"important":true,"unit":"px"},"tablet":{"value":32,"important":false,"unit":"px"},"tabletModified":true,"mobile":{"value":32,"important":false,"unit":"px"},"mobileModified":true,"desktopModified":true},"epCustomColumnsReverse":{"desktop":"","tablet":"column","tabletModified":true,"mobile":"column","mobileModified":true},"epCustomPaddingMobileModified":true,"epCustomPaddingMobile":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":false},"epCustomMarginResponsiveEnabled":true,"epCustomMarginMobileModified":true,"epCustomMargin":{"value":{"top":"80","right":"auto","bottom":"100","left":"auto"},"unit":"px","important":false},"epCustomMarginMobile":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":false},"epCustomSizingResponsiveEnabled":true,"epCustomSizing":{"height":{"value":"","important":false,"unit":"%"},"width":{"value":80,"important":false,"unit":"%"},"maxWidth":{"value":"","important":false,"unit":"%"},"maxHeight":{"value":"","important":false,"unit":"%"}},"epAnimationGeneratedClass":"edplus_anim-Ya6syb","epGeneratedClass":"eplus-wrapper"} --> <div class="eplus-hVS4qA ep-custom-column wp-block-columns alignfull are-vertically-aligned-top eplus-wrapper"><!-- wp:column {"verticalAlignment":"top","width":"50%","className":"eplus-qHPfgC","epCustomPadding":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":true},"epCustomMargin":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":false},"epCustomBorderRadius":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":false},"epCustomSizing":{"height":{"value":100,"important":true,"unit":"%"},"width":{"value":"","important":false,"unit":"%"},"maxWidth":{"value":"","important":false,"unit":"%"},"maxHeight":{"value":"","important":false,"unit":"%"}},"epCustomBackground":{"solid":"rgba(232, 239, 241, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomShadow":{"inset":false,"horizontal":2,"vertical":2,"blurRadius":5,"spreadRadius":2,"shadowColor":"rgb(171, 184, 195)","important":false,"loaded":true},"epAnimationGeneratedClass":"edplus_anim-R27exr","epGeneratedClass":"eplus-wrapper"} --> <div class="eplus-qHPfgC wp-block-column is-vertically-aligned-top eplus-wrapper" style="flex-basis:50%"><!-- wp:heading {"level":3,"className":"eplus-j46moc","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"10","right":"10","bottom":"10","left":"10"},"unit":"px","important":false},"epCustomBackground":{"solid":"rgba(17, 118, 192, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomTypographyResponsiveEnabled":true,"epCustomTypographyMobileModified":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":26,"important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":"500","textStyle":[],"textColor":{"color":"rgba(255, 255, 255, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epCustomTypographyMobile":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":22,"important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"rgba(255, 255, 255, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epAnimationGeneratedClass":"edplus_anim-NVGVfS","epGeneratedClass":"eplus-wrapper"} --> <h3 class="eplus-j46moc eplus-wrapper">1) GRANDE RISPARMIO: <br>Le Pompe di Calore consumano poca energia</h3> <!-- /wp:heading --> <!-- wp:paragraph {"className":"eplus-cF85zA","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"","right":"10","bottom":"","left":"10"},"unit":"px","important":false},"epCustomTypographyResponsiveEnabled":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":"justify"},"epAnimationGeneratedClass":"edplus_anim-Ha7wE5","epGeneratedClass":"eplus-wrapper"} --> <p class="eplus-cF85zA eplus-wrapper">Senza entrare troppo nel gergo tecnico, consumano un solo 1 kWh di energia elettrica per produrre più di<strong>4 kWh di energia per il riscaldamento</strong>.</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"eplus-tfSXZy","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"","right":"10","bottom":"","left":"10"},"unit":"px","important":false},"epCustomTypographyResponsiveEnabled":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":"justify"},"epAnimationGeneratedClass":"edplus_anim-43CM6P","epGeneratedClass":"eplus-wrapper"} --> <p class="eplus-tfSXZy eplus-wrapper">Se andiamo poi ad abbinare Pompa di calore e impianto fotovoltaico, la corrente elettrica viene autoprodotta e il <strong>risparmio cresce</strong> ancora di più e si riscalda la casa <strong>senza emissioni di CO2</strong>!</p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top","width":"50%","className":"eplus-QX2UxF","epCustomPadding":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":true},"epCustomMargin":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":false},"epCustomSizing":{"height":{"value":100,"important":true,"unit":"%"},"width":{"value":"","important":false,"unit":"%"},"maxWidth":{"value":"","important":false,"unit":"%"},"maxHeight":{"value":"","important":false,"unit":"%"}},"epCustomBackground":{"solid":"rgba(232, 239, 241, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomShadow":{"inset":false,"horizontal":2,"vertical":2,"blurRadius":5,"spreadRadius":2,"shadowColor":"rgb(171, 184, 195)","important":false,"loaded":true},"epAnimationGeneratedClass":"edplus_anim-R27exr","editorPlusCustomCSS":".eplus-QX2UxF { \n height: 100%; \n}","epGeneratedClass":"eplus-wrapper"} --> <div class="eplus-QX2UxF wp-block-column is-vertically-aligned-top eplus-wrapper" style="flex-basis:50%"><!-- wp:heading {"level":3,"className":"eplus-LJzuck","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"10","right":"10","bottom":"10","left":"10"},"unit":"px","important":false},"epCustomBackground":{"solid":"rgba(17, 118, 192, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomTypographyResponsiveEnabled":true,"epCustomTypographyMobileModified":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":26,"important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":"500","textStyle":[],"textColor":{"color":"rgba(255, 255, 255, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epCustomTypographyMobile":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":22,"important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"rgba(255, 255, 255, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epAnimationGeneratedClass":"edplus_anim-NVGVfS","epGeneratedClass":"eplus-wrapper"} --> <h3 class="eplus-LJzuck eplus-wrapper">2) SIA CALDO CHE FREDDO: <br>Climatizzati Tutto l’Anno</h3> <!-- /wp:heading --> <!-- wp:paragraph {"className":"eplus-suGalc","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"","right":"10","bottom":"","left":"10"},"unit":"px","important":false},"epCustomTypographyResponsiveEnabled":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":"justify"},"epAnimationGeneratedClass":"edplus_anim-Ha7wE5","epGeneratedClass":"eplus-wrapper"} --> <p class="eplus-suGalc eplus-wrapper"><strong>Con un unico impianto</strong> integrato è possibile <strong>riscaldare la casa in inverno e raffrescarla in estate.</strong> </p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"eplus-z6RFis","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"","right":"10","bottom":"","left":"10"},"unit":"px","important":false},"epCustomTypographyResponsiveEnabled":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":"justify"},"epAnimationGeneratedClass":"edplus_anim-M6Phza","epGeneratedClass":"eplus-wrapper"} --> <p class="eplus-z6RFis eplus-wrapper">Un solo impianto efficiente in grado di climatizzare la casa tutto l’anno, senza emissioni nocive nell’ambiente, con bassissimi costi di manutenzione e con un elevatissimo rapporto di efficienza energetica.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top","width":"50%","className":"eplus-sbQkmA","epCustomPadding":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":true},"epCustomMargin":{"value":{"top":"","right":"","bottom":"","left":""},"unit":"%","important":false},"epCustomSizing":{"height":{"value":100,"important":true,"unit":"%"},"width":{"value":"","important":false,"unit":"%"},"maxWidth":{"value":"","important":false,"unit":"%"},"maxHeight":{"value":"","important":false,"unit":"%"}},"epCustomBackground":{"solid":"rgba(232, 239, 241, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomShadow":{"inset":false,"horizontal":2,"vertical":2,"blurRadius":5,"spreadRadius":2,"shadowColor":"rgb(171, 184, 195)","important":false,"loaded":true},"epAnimationGeneratedClass":"edplus_anim-R27exr","epGeneratedClass":"eplus-wrapper"} --> <div class="eplus-sbQkmA wp-block-column is-vertically-aligned-top eplus-wrapper" style="flex-basis:50%"><!-- wp:heading {"level":3,"className":"eplus-ttINTM","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"10","right":"10","bottom":"10","left":"10"},"unit":"px","important":false},"epCustomBackground":{"solid":"rgba(17, 118, 192, 1)","gradient":"","media":{"backgroundPositionX":"","backgroundPositionY":"","background":{},"backgroundSize":"","backgroundRepeat":"","backgroundAttachment":"","backgroundPlacement":"back"}},"epCustomTypographyResponsiveEnabled":true,"epCustomTypographyMobileModified":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":26,"important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":"500","textStyle":[],"textColor":{"color":"rgba(255, 255, 255, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epCustomTypographyMobile":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":22,"important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"rgba(255, 255, 255, 1)","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":""},"epAnimationGeneratedClass":"edplus_anim-NVGVfS","epGeneratedClass":"eplus-wrapper"} --> <h3 class="eplus-ttINTM eplus-wrapper">3) POCHISSIMA MANUTENZIONE = <br>Risparmio Tempo/Denaro</h3> <!-- /wp:heading --> <!-- wp:paragraph {"className":"eplus-qFs64h","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"","right":"10","bottom":"","left":"10"},"unit":"px","important":false},"epCustomTypographyResponsiveEnabled":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":"justify"},"epAnimationGeneratedClass":"edplus_anim-Ha7wE5","epGeneratedClass":"eplus-wrapper"} --> <p class="eplus-qFs64h eplus-wrapper">Le Pompe di calore richiedono <strong>pochissima manutenzione.</strong> Non sono necessari canne fumarie, serbatoi di carburante o scorte di combustibili (Gpl o Gasolio), quindi <strong><em>analisi dei fumi e pulizia camino decadono</em> e saranno solo un brutto ricordo.</strong></p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"eplus-8aBOLt","epCustomPaddingResponsiveEnabled":true,"epCustomPadding":{"value":{"top":"","right":"10","bottom":"","left":"10"},"unit":"px","important":false},"epCustomTypographyResponsiveEnabled":true,"epCustomTypography":{"lineHeight":{"value":"","important":false,"unit":"px"},"fontSize":{"value":"","important":false,"unit":"px"},"letterSpacing":{"value":"","important":false,"unit":"px"},"fontWeight":null,"textStyle":[],"textColor":{"color":"","imp":false},"underline":{"color":"","style":""},"lineThrough":{"color":"","style":""},"textAlignment":"justify"},"epAnimationGeneratedClass":"edplus_anim-u46jCi","epGeneratedClass":"eplus-wrapper"} --> <p class="eplus-8aBOLt eplus-wrapper">Consigliamo comunque di far visionare regolarmente la Pompa di Calore da un tecnico specializzato ogni due anni.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Equal Height Columns’ is closed to new replies.
