Streaming live at 10am (PST)

Collections layout - I messed something up and skewed it


#1

Hey guys and gals. I am playing with collections for a blog page and made a “blog play page”. Had it all laid out nice, and it still looks nice in mock-up mode. Go to preview. and two elements get pushed down from the second row to a third row leaving a blank space. I must have changed something in the layout or positioning but I can’t figure out what. It was working fine at some point. Any suggestions or help appreciated!

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=19ca8163ae65903fe8ecf06f0fdbc095


#2

Hi @IPT here is one solution. Put a wrapper around your CMS data and set it to 90%

MyWrapper

I mised to put the button in the wrapper:grinning:


#3

Tried that, and it went huge! Everything went to overlapping and I still had the same problem with the second row getting bumped to the lower row for 2/3 items.

I saved it under a new page _ test page collections -

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=978e63e1b5b1215b78db46a577118671


#4

Up, figured it out. Somehow the collection item 3 got set to float L. Once I turned that off all was well. Wish I knew enough about web design to actually explain that, but at least it’s visually working again.


#5

@IPT Realy strange, sure you did the same as me? The wrapper is set på 90% for each record. Should not overlap. I tried in you site and it did look fine. Will take a new look

Ok then i will leave it, let me know If you have Any other problems


#6

Weird, now I have it working, but the first of the image are stepped with the first lower than the second, lower than the third…

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=5055c45c4fc536157fb458b1dd754dc8


#7

@IPT guess you images is If different size. Will take a look again


#8

Yeah, I think they are. One is little shorter than the others. MAybe I will have to resize with a white margin on bottom to make it = in height to the others?

Here is what happened with the wrapper.


#9

offset -but I think the owl image is shorter.


#10

Cant’s se any wrapper, have you updated the project? Blog Page Pay right?


#11

Made a new page and copied the collection to it. Here it is - I titled it “test page collections” to keep the wrapper and changed the original back. Thanks for your help :).

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=21a49dd03ef3a3f7f9e225b569cea09d


#12

@ipt ok your wrapper is 90 VH instead of 90 %
The set your hight to the rich text block to min 200 px and max 200 px


#13

Bingo - thank you! Wish I understood this stuff better. Appreciate your help!


#14

@IPT you can also set the hight og the image to 300 px for better looking

Don’t forget to adjust for each device size on portrait mobil you would like to change the collection ti rowe insted of line


#15

Well, decided I might try 4 columns…wham, all out of wack again. Shouldn’t this just automatically level itself to the top edge?

edit - ah, needed to change the Rich text min height. Were good again.