Responsive split section where image touches edge but not text

Design help Layout & Design
1

Hello all. This is probable pretty simple and standard design practice but I have yet to tackle it and want to see if there’s a straightforward way to achieve this. I want to create a split section like here ( All About James Hardie Company | James Hardie ) where the text and image are both confined to a specific width, matching the rest of the site, but once the viewport gets to a certain width, the image spans to the edge while the text remains confined.

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi there,

To create a split section design with confined content and full-width images, you’ll need to work with Sections and Containers in Webflow. Here’s how to set it up:

Sections in Webflow naturally span the full width of the browser window, making them ideal for background images and full-width content. To maintain organized content within these sections, add a Container element - this will help constrain your text and other content to a readable width while allowing background elements to extend edge-to-edge.

For optimal display on larger screens, add a wrapper Div block directly inside the Body element. Set this wrapper’s width to 100%, apply auto margins, and define a maximum width (such as 2000px) to prevent the confined content from stretching too wide on large displays.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

The basic setup is simple, e.g.

section
  container 
    div - 2-col grid
      div - text wrap
        ... text content ...
      div - image wrap
        ... image content ...

The rest is deciding what you want responsively, and setting those styles at the right breakpoints-

  • the container’s padding and max width determine whether the whole construction has space to the sides, or is up against the edge
  • the text wrap decides the alignment and padding of the text content
  • the image wrap provides a convenience for the image size, e.g. object-fit: cover and alignment
  • the 2-col grid can be changed to 1-col at mobile portrait so they stack vertically
4

Would you mind breaking it down for my specific dimensions? Most content on this website is confined to 95vw width / 1366px max-width. I want to make a split section where both the text and image are confined to this 95vw / 1366px but once the viewport gets small enough and the 95vw kicks in, the image spans to the edge while the text remains confined to remain consistent with the rest of the site. I’m probably over-explaining on something simple but for some reason I can’t seem to get it right.

5

If you’re unsure, build this in a separate project so you can work out your classes.

If you want the image to go to the edge, you need 100% width on this section, not 95vw max, or you’ll have a 2.5vw gap between the image and the edge.

I can’t give you more than that without building it for you, and walking through your goals breakpoint by breakpoint. Message me if you need someone to help you with mentoring or feature builds like this.

Otherwise, I’d recommend you just work through the mechanics, it’s the best way to learn.