Streaming live at 10am (PST)

"Complex" columns not working correctly. Especially in responsive


#1

Hi folks!

I am currently polishing my personal website : https://preview.webflow.com/preview/laurent3?preview=ce20f85afe4d03c9c6f88654569b0354

Everything's fine except these "complex" columns I created:

It is really complicated to make it works correctly in responsive. Especially because when I give positionning properties to these images, their parent containers lose all their height & width dimensions... container div, column and row widget.

So for now I just gave dimension to this Shots - Link box but it's not really fixing the issue.

Any idea anyone? Would love to hear your thought on this! Don't hesitate to try out the responsive version to really understand the issue.

Thanks!


#2

Ok what is not working the way you want? Can you explain a bit better what seems to bug?

Another way to go with this design is to use inline-boxes intead of row widgets. Set them to 33% width and work from there.

Nice hall of fame btw


#3

You're right using Divs with 33% width might be better for responsive. Way lighter "architecture". But how do I superpose the two images here:

Thanks so much man smiley


#4

Superimposing things is extremely easy once you've understood the absolute position rule.

An element is either: not positioned (by default, position:auto)

or positioned (either relative, absolute or fixed -- there's also static and inherit).

Good to know: adding position:relative to an element doesn't change anything visually as long as you don't add placement values.

So in oder to make element overlap others, you need to give them a position:absolute property, along with placement values. Those things:

The only thing needed now is a reference for those coordinates. So here is the rule:

An absolute positioned element is positioned regarding its closest positioned parent.

So if you have a div with position:relative, and an image inside with position:absolute, the coordinates will reference the top left corner of the div, by default (unless you change that by clicking on one of these:

)

But if the div isn't positioned, the absolute element will look up in the hierarchy until it finds a positioned parent... up to the body element.

So in your case, make a div, give it position:relative, drag your images inside, give them position:absolute and click on this

for both, give the lower image a z-index of 1 and the one on top a z-index of 2 (so it's on top)

If you can't see the z-index thing, click again on the position property even if it's already clicked:

https://v.usetapes.com/BvNTtfuMFL


#5

Also, modify your markup.

You have a div, a link block inside and then 2 images. remove the 50px top margin on the div. Drag a full container under the pink title block. Give the 50 margin top to that container, drag your div in the container, give the div display:inline box.

Now, select the div, copy and paste it two times. Add a 14px padding to it (top left bottom right) so the images shrink a little, add a 28px bottom margin to it. Now copy the div 4 more times, you should get this:

You could give alternative extra classes to the image on the bottom with different rotation values so the piles don't look all the same smile Like this:


#7

Awesome man! I'm impressed - Great tutorial smile

Everything is working fine now. Last step is a great idea but I am using interactions to rotate the "Placeholder".

Thank you so much @vincent - Really smile

See you soon, cheers!


#8