A heading element icon ans text element column problem

Support
#1

Hi support. I have two problem to solve in this page:
http://dev.cckl.org/notre-region/

  1. I need the icon to align at the top of the heading like when the heading is on one line.

  2. The text in the bottom of the page have two columns and the Content Break is set to Avoid. There is an unwanted white space at the top of the second column.

Thanks in advance for the help.

#2

Hi Philippe,

  1. You can set the alignment under Text Content Flex Layout

  1. I checked and it’s aligning fine on my end.

May I know what browser are you using.

Thanks

#3

Hi @paul.r. I use Safari Mac.

  1. With the Vertical Flex layout set to Start the icon is too high.

  2. I use Safari 12.0.1 on Mojave. The Classic Columnize element do not have this glitch on Safari mac but I prefer to use the more customizable new elements.

#4

Hi Philippe,

It’s the same for chrome and it’s because the space of the texts, they are actually aligned both on top but create an illusion of not being aligned due to text space. With that, you can also change the top margin of the icon by going to GRAPHIC section then match it with the text.

Thanks!

#5

Thank you @Rad. First problem solved.

The 2) comment was on my original post

#6

Hello @Philippe,

I am another staff checking in. I have checked the page in Safari and I can confirm it. This is because of the bottom margin of the paragraph you have. Safari has a different kind of way in rendering the columnize feature. If you adjust the margin bottom then it should resolve the issue in Safari.

Please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-text p:nth-child(2),
.x-text p:nth-child(3){
    margin-bottom: 0;
}

Or you can adjust the height of your paragraph by modifying the text contents.

Hope this helps.

#7

Thank you @RueNel. Problem solved.

#8

Glad we were able to help :slight_smile:

#9

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