Wide image with text is broken

ID: 331988

https://www.intensse.studio/landing-page-a2

When I use “Wide image with text” element, looks like:

but in some window sizes it’s cutted like:

Hi!
I think this is happening because you’ve set the Design → Layout → Container width in pixels.
The way this preset calculates the margin left of the first column is based on the container width.
I guess there are 2 possible options

  • If you want the layout to react to a variable width, you need to use a relative unit for the container width.
  • Another option is to use some custom CSS and override the behaviour yourself

Hope this helps!

1 Like

I think I found a solution with CSS changing the @media screen max-width to my custom Container width -1px

@media screen and (max-width: 71.1875rem) {
    .ed-element.preset-fullscreen-text-and-background-v3-alignments .text-and-background-content:first-child {
        margin-left: 0;
    }
    .ed-element.preset-fullscreen-text-and-background-v3-alignments .text-and-background-content:first-child>.inner {
        padding-left: 1.25rem;
    }
}
1 Like