# Wide image with text is broken

**URL:** <https://community.sitejet.io/t/wide-image-with-text-is-broken/1591>\
**Category:** Website Builder\
**Tags:** cms\_element\
**Created:** [March 26, 2022, 7:58pm UTC](https://community.sitejet.io/t/wide-image-with-text-is-broken/1591 "2022-03-26T19:58:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joaquin\_Olivas](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/joaquin_olivas/32/2610_2.png) [@Joaquin\_Olivas](https://community.sitejet.io/u/Joaquin_Olivas)\
**Post date:** [March 26, 2022, 7:58pm UTC](https://community.sitejet.io/t/wide-image-with-text-is-broken/1591/1 "2022-03-26T19:58:49Z")

</div>

ID: 331988

[https://www.intensse.studio/landing-page-a2](https://www.intensse.studio/landing-page-a2)

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

 ![Captura de Pantalla 2022-03-26 a la(s) 13.56.31](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/b/bcc1750d0de1e1208f5f9fba978059ca8cea1d4e.jpeg)

but in some window sizes it’s cutted like:

 ![Captura de Pantalla 2022-03-26 a la(s) 13.54.35](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/4/4cb1853e651e3ead2b58f686d8b6394ba569dfda.jpeg)

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [March 27, 2022, 7:32am UTC](https://community.sitejet.io/t/wide-image-with-text-is-broken/1591/2 "2022-03-27T07:32:51Z")

</div>

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.  
 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/9/93aa48c7024becbb4906e37fb6f29ce621de0a26.png)
- Another option is to use some custom CSS and override the behaviour yourself

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Joaquin\_Olivas](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/joaquin_olivas/32/2610_2.png) [@Joaquin\_Olivas](https://community.sitejet.io/u/Joaquin_Olivas)\
**Post date:** [March 27, 2022, 6:24pm UTC](https://community.sitejet.io/t/wide-image-with-text-is-broken/1591/3 "2022-03-27T18:24:53Z")

</div>

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

```auto
@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;
    }
}

```