Split Hero with Centered Container?

Community resources General
1

I’ve attached a picture of my design here. I’m looking to build a hero section with two columns at 50% and then have content within each of those columns. My design is set up to have a 1280px container for all non full-width imagery/backgrounds (ie the same width as the navbar). How do I contain the information to that 1280px width on a larger screen? I haven’t been able to figure out how to align information to that 1280px container.

Here is a read-only link to my Webflow project: Webflow - SHAPE

Screenshot 2024-02-14 at 5.12.33 PM
Screenshot 2024-02-14 at 5.12.33 PM1572×898 78.4 KB

2

Hey,

you could have the image & solid color split as an absolute positioned div/grid (relative to the hero section) in the background, while the content itself is placed in a grid inside of your normal container on top.

3

That sounds awesome! Is that easy to do?

4

Yeah, it’s quite simple. I made a super quick example, hopefully it helps:

https://preview.webflow.com/preview/robins-dynamite-site-006493?utm_medium=preview_link&utm_source=designer&utm_content=robins-dynamite-site-006493&preview=5bde8b46d98e23599e7cf5ca6a74e675&workflow=preview

5

So helpful! I really appreciate your help! :star_struck:

1 Like