Align text in 2 column layouts

Support
#1

Hi Community,

I was wondering how do i align text without in a 2 column layout without there being a huge gap. See the example:

Im trying to align the text thats circled to below the red line so it aligns with “we are transparent…” headline

#2

Hello Carolina,

Thanks for asking. :slight_smile:

You can adjust the margin right property to adjust the spacing. Here’s the CSS that you can add under Customize > Setup > Element CSS:

$el{ margin-right: 1%;}

To align the text, you can use Margin Top property on the Text element under Text Element > Customize > Setup > Element CSS. To learn more about margin property, please take a look at following resource.

https://www.w3schools.com/css/css_margin.asp

Thanks.

#3

Thanks for the quick reply, I added the code by clicking on column 2 and put the code in but it didn’t work…I also tried finding margin top but i cant seem to find it

#4

Hi Carolina,

I went to the website and selected the Gap element that you used above the left column, and increased it to 30px.

You can play with the values to fine tune the gap and make sure it is aligned with the other text.

Please consider that the alignment will be available only for a specific range of the devices. If you shrink your browser window the text will not have enough space and will break into another line, just a heads up that the effect that you want is not possible for all device sizes.

Thank you.

#5

I think there is a misunderstanding i want the text that reads “we are transparent…” to align to the “the he foundation…” text when i put a gap above the latter text on the right side the gap is too big on mobile…is there any way it can be aligned? without havinhg a huge gap on mobile once it stacks?

#6

Hello Carolina,

You will have to use a gap element and then hide this gap element in smaller screens by utilizing the “Hide During Breakpoints” option in the gap element setting’s “Customize” tab.

To know more about the “Hide During Breakpoints” option, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

The remaining gap would likely be coming from the bottom padding of the first column and the top padding of the second column.

#7

That worked perfectly!! and you are right it was the padding on the bottom of column 1, once i removed it worked perfectly…Thanks again!!! you guys rock!!!

#8

You’re most welcome and glad we could always help :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.