# Image with Text display size

**URL:** <https://community.sitejet.io/t/image-with-text-display-size/5350>\
**Category:** Website Builder\
**Tags:** cms\_responsive, cms\_element\
**Created:** [November 21, 2025, 12:58pm UTC](https://community.sitejet.io/t/image-with-text-display-size/5350 "2025-11-21T12:58:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [November 21, 2025, 12:58pm UTC](https://community.sitejet.io/t/image-with-text-display-size/5350/1 "2025-11-21T12:58:07Z")

</div>

I am using a blank template. I am struggling to get the image to look correctly on all 3 modes (desktop, tablet and mobile). I have tried the preset “image with text” as well as “wide image with text”. I have changed all the settings in the containers, and tried to change the image sizes, but when it looks good on desktop, it looks bad on tablet and mobile. When it looks good on tablet, it looks bad on desktop and mobile.

Please advise on how to make this image appear full size on all 3 modes.

 ![Desktop](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/3/3b94515da3e5c8eeb74fac2fc79d93f36959ad5e.jpeg)

 ![Tablet](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/b/b19697f9245ddd3ec8273965d69167a3e66c9dfd.jpeg)

 ![Mobile](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/d/d2b8366858621c0ec2fefa277397e3245abcbf4d.jpeg)

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [November 21, 2025, 2:01pm UTC](https://community.sitejet.io/t/image-with-text-display-size/5350/2 "2025-11-21T14:01:00Z")

</div>

Hey Richard,

Nice to read from you again. 🙂

That surprised me a bit because usually the settings are downward adjusting as per [https://help.sitejet.io/hc/en-us/articles/24275878741015-Responsiveness](https://help.sitejet.io/hc/en-us/articles/24275878741015-Responsiveness)

Would you like to post your preview link and website ID? Let me take a look.

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [November 21, 2025, 5:18pm UTC](https://community.sitejet.io/t/image-with-text-display-size/5350/3 "2025-11-21T17:18:40Z")

</div>

Thank you André!

`https://cms.sitehub.io/2472005`

💡 Some key findings:

1. I tried to achieve more or less the same result as the first preset (Wide image with text) in [Toyland](https://www.template-toyland.de.rs/), but **without** using absolute heights and widths. I don’t think it will be possible.
2. I did not know that the flexbox settings can also be changed for each viewport. It is difficult to know what can be changed (and what not) for each viewport, without fiddling with everything to see the behaviour.

I will play with this again over the weekend and see if I can manage to get it right.

Thank you for helping!

---

<div class="post-metadata">

**Author:** ![Kalisperakichris](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kalisperakichris/32/3572_2.png) [@Kalisperakichris](https://community.sitejet.io/u/Kalisperakichris)\
**Post date:** [November 23, 2025, 8:48am UTC](https://community.sitejet.io/t/image-with-text-display-size/5350/4 "2025-11-23T08:48:00Z")

</div>

**Hey @Richard_Honey!**  
This behaviour is common in the _Website Builder_ when the image element tries to keep its own proportions, so each device ends up looking different.

Here’s an easy way to make the image look full-width and consistent on **desktop, tablet, and mobile** :

* * *

### **Solution in the Sitejet Website Builder**

**1. Select the container/column that holds the image**  
Make sure you click the _container_ around the image, not the text.

**2. Change the image to “Background image”**  
In the right sidebar → go to **Background** → upload or select the image.

**3. Use these background settings:**

- **Size:** `Cover`

- **Position:** `Center`

- **Repeat:** `No-repeat`

**4. Set a fixed height per breakpoint (desktop / tablet / mobile)**  
Still in the container settings:

- Desktop: ~500–650px

- Tablet: ~400–500px

- Mobile: ~300–400px

You can switch breakpoints at the top of the builder and set different heights for each mode.

* * *

### Why this fixes the issue

Background images scale proportionally using _cover_, so the section always stays full-width without breaking the layout — the easiest way to keep a big image looking good on all devices in the classic Builder.

* * *

If you prefer to keep a _normal image element_, he would need to make the **image column 100% width** and remove any max-width settings, but the background method is far more reliable.

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [November 25, 2025, 1:24pm UTC](https://community.sitejet.io/t/image-with-text-display-size/5350/5 "2025-11-25T13:24:44Z")

</div>

Hi Chris.  
Thank you so much for your detailed response.

I have found the solution to this:  
The container did not flex around the image, because it is a background image, **not** an image element inside the “ **Wide image with text** ” preset. I simply deleted the image from the **background** container and inserted it into the **element** container. Voilà. No need to adjust any settings, the image now displays perfectly.

💡 I couldn’t understand why the image behaved like that, because I misunderstood the preset title, since it is named “ **Wide image with text** ”. This led me to believe that the main element inside this preset is an image element (which will flex), supplemented with a secondary container, containing a text element. This is not the case. The text element is the main element inside this preset, since the preset has a “ **box** ” setting which does not adjust the size of the box selected, but the first container inside it, which is the text container:

 ![Box](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/6/630b45c704b3b0c8ded5ebf24c5ac5d3f9517704.jpeg)

If the preset was titled “ **Text with background image** ”, it would be easier to understand that the container will not flex around the image.
