# Inline Image size

**URL:** <https://community.glideapps.com/t/inline-image-size/75558>\
**Category:** Ask for Help\
**Created:** [August 9, 2024, 6:20pm UTC](https://community.glideapps.com/t/inline-image-size/75558 "2024-08-09T18:20:16Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![BungaWunga\_Wunga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungawunga_wunga/32/78506_2.png) [@BungaWunga\_Wunga](https://community.glideapps.com/u/BungaWunga_Wunga)\
**Post date:** [August 9, 2024, 6:20pm UTC](https://community.glideapps.com/t/inline-image-size/75558/1 "2024-08-09T18:20:16Z")

</div>

I’m trying to use some imagens inline with text. I used HTML ( ![]()) +Rich Text. It works if the image is alone on a line, but it does not work if the image has any text before or after it.

 ![Imagem do WhatsApp de 2024-08-09 à(s) 15.17.02_4af64b87](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/6/46cd0006a937524d51a8c2e1bdbcc0947d35e4b5.jpeg)

Any ideas?

Thanks.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 10, 2024, 12:02am UTC](https://community.glideapps.com/t/inline-image-size/75558/2 "2024-08-10T00:02:09Z")

</div>

So in your example, would the image be smaller like the “top” image, and be something like: “With text before [image here] or after it…” on the same line?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 10, 2024, 12:09am UTC](https://community.glideapps.com/t/inline-image-size/75558/3 "2024-08-10T00:09:29Z")

</div>

```auto
<div style="display: flex; align-items: center;">
  <span>This is some text before the image</span>
  <img src="https://img.icons8.com/ios-filled/50/yin-yang.png" style="height:25px;margin:5px">
  <span>and this is some text after the image.</span>
</div>

```

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/9/29a0c1d0dc4ad153fb2d08d0df7fc07e4d623af1.png)

---

<div class="post-metadata">

**Author:** ![BungaWunga\_Wunga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungawunga_wunga/32/78506_2.png) [@BungaWunga\_Wunga](https://community.glideapps.com/u/BungaWunga_Wunga)\
**Post date:** [August 10, 2024, 12:51pm UTC](https://community.glideapps.com/t/inline-image-size/75558/4 "2024-08-10T12:51:42Z")

</div>

Thanks for your answer! It works… but I don’t know why, the lines are split in 2.

I just copy/pasted your code as it was.

![Image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/e/ce6225e43377c1a69ccf08532acac8ce24ba0e2f.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 10, 2024, 1:53pm UTC](https://community.glideapps.com/t/inline-image-size/75558/5 "2024-08-10T13:53:42Z")

</div>

Weird, can you show me your setup?

---

<div class="post-metadata">

**Author:** ![BungaWunga\_Wunga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungawunga_wunga/32/78506_2.png) [@BungaWunga\_Wunga](https://community.glideapps.com/u/BungaWunga_Wunga)\
**Post date:** [August 11, 2024, 3:37am UTC](https://community.glideapps.com/t/inline-image-size/75558/6 "2024-08-11T03:37:00Z")

</div>

I’m quite new to glide, what info do you need?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 11, 2024, 3:44am UTC](https://community.glideapps.com/t/inline-image-size/75558/7 "2024-08-11T03:44:27Z")

</div>

This is called a wrapping issue, where your text is too long, causing it to wrap downwards, along with the text-alignment issue that defaults to left alignment. Try adding `style="text-align:center;"` inside your span tag, which will make the spacing of your text more evenly centered around your icon.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 11, 2024, 3:46am UTC](https://community.glideapps.com/t/inline-image-size/75558/8 "2024-08-11T03:46:03Z")

</div>

Do you see the problem in your screenshot on desktop or mobile?

---

<div class="post-metadata">

**Author:** ![BungaWunga\_Wunga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungawunga_wunga/32/78506_2.png) [@BungaWunga\_Wunga](https://community.glideapps.com/u/BungaWunga_Wunga)\
**Post date:** [August 11, 2024, 4:11am UTC](https://community.glideapps.com/t/inline-image-size/75558/9 "2024-08-11T04:11:17Z")

</div>

Mobile.On desktop it works with that amount of text, but if you put more text before or after the image, the same thing will happen.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 11, 2024, 4:21am UTC](https://community.glideapps.com/t/inline-image-size/75558/10 "2024-08-11T04:21:37Z")

</div>

What do you expect from your text when the screen size is not enough to accommodate it?

---

<div class="post-metadata">

**Author:** ![BungaWunga\_Wunga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungawunga_wunga/32/78506_2.png) [@BungaWunga\_Wunga](https://community.glideapps.com/u/BungaWunga_Wunga)\
**Post date:** [August 11, 2024, 4:23am UTC](https://community.glideapps.com/t/inline-image-size/75558/11 "2024-08-11T04:23:41Z")

</div>

I expect it to continue to next line, not to make 2 lines of text before/after image.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 11, 2024, 4:40am UTC](https://community.glideapps.com/t/inline-image-size/75558/12 "2024-08-11T04:40:56Z")

</div>

Is it like this?

 ![Screenshot 2024-08-11 at 11.40.09](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/2/029200d243382e014ce7f4076ad3c998f650aca9.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 11, 2024, 5:06am UTC](https://community.glideapps.com/t/inline-image-size/75558/13 "2024-08-11T05:06:15Z")

</div>

![Screenshot 2024-08-11 at 12.05.25](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f3115b334b29fa7619a79a30944000109cbae278.png)

```auto
<div style="width: 100%; white-space: normal;">
  This is some text before the image 
  <img src="https://img.icons8.com/ios-filled/50/yin-yang.png" style="height: 25px; vertical-align: middle; display: inline;">
  and this is some text after the image.
</div>

```

---

<div class="post-metadata">

**Author:** ![BungaWunga\_Wunga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bungawunga_wunga/32/78506_2.png) [@BungaWunga\_Wunga](https://community.glideapps.com/u/BungaWunga_Wunga)\
**Post date:** [August 11, 2024, 1:01pm UTC](https://community.glideapps.com/t/inline-image-size/75558/14 "2024-08-11T13:01:34Z")

</div>

> [@Himaladin](#):
>
> ```auto
> <div style="width: 100%; white-space: normal;">
> This is some text before the image 
> <img src="https://img.icons8.com/ios-filled/50/yin-yang.png" style="height: 25px; vertical-align: middle; display: inline;">
> and this is some text after the image.
> </div>
> 
> ```

This worked like a charm! Thanks!!

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 18, 2024, 1:02pm UTC](https://community.glideapps.com/t/inline-image-size/75558/15 "2024-08-18T13:02:30Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.