Breaking Past Containers in Webflow

[@AVMmmm]

You are definitely the final boss of Webflow.

[@TheMasterLogoist]

A phenomenal teacher you are, with fabulous branding. That "T.RICKS" is simply one of the best I've ever seen, anywhere, in any sector. Keep up your incredible work.

[@JimmyTRUELOVE]

.. is this satire? lmao 😆

[@Theoderic]

@@JimmyTRUELOVE Definetely not. He is the one of the best teachers I ever know.

[@pelangos]

It's TRICKY!

[@bryanmanio_]

Love the addition of the guides to help further explain the layout!

[@leewilson1978]

A timely tutorial, thanks Tim

[@leonstrydom1]

Timinator! You're a legend, this tutorial was great.

[@timothyricks]

Thank you, Leon! So glad this helps!

[@Sergy_Kondrashin]

Another magic! Wow! Thank you! Love your creative solutions!

[@HarshitAgrawalOfficial]

Solid TRICK tim! Thank you 💥💥💥

[@timothyricks]

Thanks so much, Harshit!

[@Olympik92]

Thanks for the really useful explainer and the cloneable, massively helpful. Would love to know how to go about adjusting this for different column sizes whilst keeping the left one aligned. Been a real head scratcher for me for the past wee while!

[@thenocodenomad]

interesting Tim, thanks for sharing! 👏🏻

[@jdanielortega]

Hey Timothy! Awesome tutorial, thank you very much. Quick question, what's the logic behind dividing 1280 by 16EM at 0:57 ?

[@lanemelancon8014]

Great video! How would you produce a photo breaking past a container using 25% (photo) and 75% (text)? Would you use 3/4 of the container's max-width instead of 1/2, or would that not translate?

[@Olympik92]

You probably found a way to solve this over the past 10 months, but I've also been wondering the same. I've so far managed to achieve a decent result by changing the width of the container to whatever fraction of it I want it to be, (minus the extra rem for the column gap), then calculating the margin of it based on the user's viewport and the max-width of our container. So considering a container max-width of 80rem, and using your 25% as an example, our container would be 18rem, (including the 2rem we take away for column gap). Then I used custom code to set the container's margin-left to "calc((100vw - 80rem) / 2)". Doing this we get the user's screen size, take away the overall size of our container, giving a combined width of both of the margins either side, then we divide that by 2 to get the width of one margin. Then in the grid settings, I give my 18rem container a width of 0.25fr, and my bleeding container a width of 0.75fr. The caveat here is that you need to set up some rules for what happens when the screen sizes gets smaller than the container, in this case 1280px (80rem).

[@MrInsider33]

my solution was to set up a 14 column grid, use the outer two columns as padding and place the content inside the usual 12 columns and drag the image out into the padding column. Like this you can even have images aligning to complex 12 column layouts

[@timothyricks]

Nice! In that case, I guess you just wouldn’t use a max width on your grid.

[@MrInsider33]

@@timothyricks exactly

[@fizakhatri6505]

You are amazing!

[@ihsaan7807]

Excellent!

[@pelangos]

Nice!

[@omarcre8]

❤