Two Column Text, Velo Code

Hi everybody,
i’m trying to implemented a text on my site, which automatically breaks in the middle and creates two columns.
My first attempt was a html iframe, because CSS has a simple solution with “columns”. This solution worked so far, but i have the problem, that my iframe height doesn’t change its height automatically, which is a huge problem for the design on the site.

So i was hoping to do this with a simple velo code, but i cannot find anything on the internet, there are only tutorials for html/css available. As i’m not an expert on coding, i need some help.

So maybe someone here has a solution for one of my two problems:

  1. Html iFrame doesn’t change its height automatically, i need something like a “max.content” code

  2. A Velo Code to automatically break up a text in two columns

Alternative, maybe there is an option to do this with a database?

Here is the Code i used for the html iFrame:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

body{ background-color: #000000; padding: 0px; margin: 0; } p{ color: #FFFFFF; font-family: 'IBM plex mono', Ext Lt Italic; text-align: left; line-height: auto; columns: 345px 2; column-gap: 20px; } html { font-size: 23px; } @media (min-width:750px) { font-size: 14px; } @media (min-width:1000px) { font-size: 19px;
1 Like
My HTML Document body{ background-color: #000000; padding: 0px; margin: 0; } p{ color: #FFFFFF; font-family: 'IBM plex mono', Ext Lt Italic; text-align: left; line-height: auto; columns: 345px 2; column-gap: 20px; } html { font-size: 23px; } @media (min-width:750px) { font-size: 14px; } @media (min-width:1000px) { font-size: 19px; } .container { height: auto; overflow: hidden; }

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The “container” class has been added to a

element, and its height has been set to “auto” and overflow to “hidden”. This allows the container to adapt to its content and prevents any overflow from affecting the layout of the page.

Still, our Forum may not work for code related queries and I can offer you to user Velo forum for code related questions =)