Unable to allign container and split content with background picture

Hej,

The 3 pages I am trying to edit use a background picture to split the picture and text. However, the container/split content is too wide or positions wrongly, so it lays on the picture. How to style it, so that the text wont pass the blue blackground picture. Note that the same style classes are using for two similar pages. I did not create this homepage, which makes it hard to grasp the logic of the design.

Thanks in advance


Here is my site Read-Only: Webflow - Benefix

Change this element’s attributes (add a new class to it so it doesn’t overwrite for any other instances):

image

To:

display:inline-block; max-width:50%; position:relative; and it gets the desired result, I think.

You can add padding-left:20px; to make it not so far to the left of the screen. Or whatever padding you think it needs.

This worked nicely. However, I am experiencing the same issue with 3 other pages. There the settings you suggested didn’t work. I mean they did work in a high breakpoint (1440px+), but when going down to the normal desktop view the page looked very odd. It seems like this has something to do with the Section Copy 321Copy Copy being in flex layout: Webflow - Benefix

Yeah, I don’t think you’ll get a layout like that to work too well on mobile formats (Tablet Portrait or smaller in width). For that, you will want to make the text a more like a “Callout” or just a block above or the below the image. It’s simply too much stuff to fit on small-width screens.