Need help executing this layout!

Design help General
1

Hi All,

I’m fairly newer to web flow and need some help with executing on a layout I designed for my portfolio. I’ve attached an image that shows how I want to present my case studies.

My initial guess is that I could do this by using 2 columns and put the image in the left column, and the text in the right column & give it a negative margin value using absolute positioning. However, I am struggling to place the text content where I would like it to go. In particular, I am able to get the project header to move left so it overlaps on the image, but then I cannot place any other text below it or the link to go to the case study. My other guess is that I could try and do this with a grid as well?

I’ve been playing around with this all day and was able to sort of get it, but I know I’m not using the layout/positioning correctly (see how it turns out on tablet & mobile and you’ll see), so any feedback on how I can fix this to be more soundly “coded” would be much appreciated. You can see in my read-only link that I’m alternating the alignment of each project so any tips on how to execute that better are much appreciated

Screen Shot 2020-04-27 at 10.46.37 AM
Screen Shot 2020-04-27 at 10.46.37 AM1894×852 133 KB

Here is my site Read-Only: Webflow - Portfolio 2020

2

It’s too complicated at the moment, you can erase your classes and redo it from scratch using essentially a container, some divs, flexbox, and your image as a background.

Here is a video of how you can achieve it simply. And simple means solid. It’s also easier to adapt for responsivity.

Now you should separate your smartphone image from the blue bg potatoe, put the smartphone in the div close to the text and use only the blue potato as a background. This way you could even introduce nice parallax animations on scroll.

Sorry i butchered your text styles but it was quicker this way :smiley:

https://dl.dropboxusercontent.com/s%2Fpkv8tr4te5wjl5x%2Fhluz5.mp4

1 Like
3

Thanks for providing the video - super helpful! I was able to get this done following your advice. thank you!

1 Like