Columns float light version

its just under columns setup, I just used a section of tailwinds sizes as per their website, see below

added a lot more text

I did have all these sizes in but didn’t do that much

(columns - Layout - Tailwind CSS)

can use images, adjust columns different layout

I took out the ability to add a number of columns I can add it back in if you would like that not a problem

this version has more options including css col numbers and widths, not completely finished but works

elementsapp://downloadDocument/DSySIK6357y5

1 Like

Hi @upssjw,

just curious. How did you add the images? Like Typography + Image + Typograhy?

did you mean this or other videos using float around images

As I said before I just write without thinking, so I need to go back and rewrite everything just waiting until Elements can create a component

or did you mean this one

https://forums.realmacsoftware.com/t/columns-float-light-version/46463

I have added video, and Elements component, gallery works but you have to use flow fix to stop it going across two cols

I meant this one:

I just applied padding to the typography the video and image just expand into the column no padding etc applied

the drop zone in columns just drop in what ever and apply layout to each component

1 Like

Don’t fully understand how it works, but if you think that will help, yes please.
Cheers,
Paul

@paulcruice if you let me know how many columns you need eg 5 but reduce etc for different screen sizes, or if they have to be a certain width say 350px or what ever I will set up a container you can just copy into your page might help you see how it works

Steve, let’s say 5 columns is sufficient but I need the ability to vary the width of each column. I have been able to use Dan’s method of transferring to my file, so container won’t be necessary.

do you mean 5 columns varying the width of each individual column with a different width or just 5 columns with say 200px widths

Steve,

Sorry for the delay but I’m not a programmer, so had to have a think about how to reply to you. Since I don’t know the limitations/interactions of Tailwind Columns, I have to express things the way I understand them. I hope the meaning gets through to you.

I envisage:

  1. An ability to first set the number of columns on a page or in a Container of, say, a smaller size. I don’t need any more than 5 columns. Should be able to set from 1 to 5 columns. Columns to be of equal width. Most of the time I would use 4 columns.

  2. Minimum width of a column = 50mm. Max width = one column across the width of the screen.

  3. The ability to adjust the gaps between columns. Max gap width probably 20mm.

  4. The ability to add a divider between the columns, with thickness and colour adjustment.

  5. Ability to add a Border of set thickness and colour, top/bottom/left/right/none

  6. The ability to adjust the Padding between the border and the outside of the columns.

  7. Ability to set break points for small screens.

  8. Ability of text to automatically reflow as these changes are made.

I think I have covered it all. Don’t know if this makes it worse or better for you.
Finally, I have no idea what Flow Fix does nor where it is placed nor how it works.

Cheers.

Hey @paulcruice

Had a spare half hour so though I’d take a crack at making a custom coloumns component for you :laughing:

It’s not perfect, but it does work, here’s the project, and here’s a video demoing it…

Oh, and you can drop multiple components into the columns, although I’ve not tested that much. Have fun!

1 Like

just beat me to it

1 Like

@upssjw haha, yours looks much more in-depth than my component — Nice work :star_struck:

I’m sure @paulcruice will want to use your new version!