Streaming live at 10am (PST)

Stack or Tile Images


#1

Hello,
I am trying to achieve a stack of images like here; http://www.kokokaka.com/

They scale down perfectly and fit in page.

I have checked several posts also in webflow;


The latter one is the most helpful in this case yet I couldn't successfully achieve this effect. Any ideas?


#2

@omnia Hi. We can achieve something like this with webflow

http://livehelper-copy.webflow.com/

This is temporary site I made so it may be gone anytime. If you think it helpful I will move it to http://livehelper.webflow.com


#3

Hey there,
The stacks look perfect except the white space. I guess that is optional. How is the responsiveness of it works and how can I do it?

By the way "mix it up" script looks really cool. I would love to combine that stack with "mix it up" feature can you tell me how I can achieve it?

Thanks for your reply.


#4

Hi @omnia Here is the public link https://webflow.com/design/livehelper-copy?preview=6373f0973ee4b162d493e01d57ac4fbf

You can play with that in read only mode as well as observe their properties. It is pretty simple actually.

About mix-it-up Livehelper public link is https://webflow.com/design/livehelper?preview=64db81b7f9f1dcb5fe0be42d89a14d89

There is a discussion on previous post here http://forum.webflow.com/t/need-help-creating-a-portfolio-gallery-area-with-sorting-function/3646/3 Please read it first and do not hesitate to ask more if you need.

Cheers


#5

Thank you. I guess I can handle mix-it-up with the discussion you linked.

But the stack you provided does not scale down properly like http://www.kokokaka.com . Do I need additional script for that?


#6

@omnia I try to avoid using script and stay on what webflow provided and still we can have a great result there to be honest. Because each class is dependent for each view, I mean we can surely set a different properties for each view. So, for Phone Landscape we can change wrapper20 Width from 20% to 25% etc like shown on images below.

And we also able to re-arrange all those blocks so we can have our wall a better look.

That's it I guess

Cheers

Notes: I know we cannot re-arrange just like that because it will affect the other view. What I meant is we do it with all the view in mind at first step. wink


#7

Thank you, I have managed to create the stack.


#8