# Expand 'Image' and 'Title' component to edge of screen

**URL:** https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296
**Category:** Feature Requests
**Created:** [February 5, 2020, 9:47pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296 "2020-02-05T21:47:06Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Rasha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rasha/32/4585_2.png) [@Rasha](https://community.glideapps.com/u/Rasha)
#### Post date: [October 2, 2020, 5:21pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/21 "2020-10-02T17:21:43Z")

</div>

That’s a great idea. I’ll play around with it next week. Looks snazzy : - )

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [October 2, 2020, 5:27pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/22 "2020-10-02T17:27:15Z")

</div>

Thanks @Rasha 😁

---

<div class="post-metadata">

### Author: ![Rasha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rasha/32/4585_2.png) [@Rasha](https://community.glideapps.com/u/Rasha)
#### Post date: [October 2, 2020, 5:27pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/23 "2020-10-02T17:27:33Z")

</div>

No reason why this can’s also be home to your fantastic tutorials. A wiki is born.

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [October 2, 2020, 5:28pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/24 "2020-10-02T17:28:47Z")

</div>

Of course! As I said to Jack, I’m a bit used to do it in portuguese, but I gotta start in english also lol

---

<div class="post-metadata">

### Author: ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)
#### Post date: [October 2, 2020, 5:29pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/25 "2020-10-02T17:29:53Z")

</div>

Just a quick note for CSS changes — be aware of the issues they may present in full screen mode. CSS code that uses px instead of % for setting widths, for example, won’t translate nicely to a full screen display. Not saying it shouldn’t be done, just be aware that it might not translate to all formats as nicely as it does in the editor.

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [October 2, 2020, 5:44pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/26 "2020-10-02T17:44:23Z")

</div>

Agreed Kyle! While glide doesnt have a flexibility to edit desktop mode also…

Nowadays when I use some CSS code, I insert what already have, open the app in a new browser, test and modify in “Inspection” and after this I change in glide.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [October 2, 2020, 6:44pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/27 "2020-10-02T18:44:29Z")

</div>

Good point!

---

<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: [October 4, 2020, 9:45am UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/28 "2020-10-04T09:45:56Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/d/d82417d25b7fa95261bfb66ee3d90f025f1de626.jpeg)

Lucas, how do you get the “table” info (episodes/sessions/blogs) here to align correctly. I didn’t have much luck with Markdown.

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [October 4, 2020, 3:28pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/29 "2020-10-04T15:28:37Z")

</div>

What does your markdown look like? Are you using any alignment in the markdown table like |:—|, or |:—:|, or |—:|?

It’s really hard to get a markdown table to span the width of the screen properly so I use html tables instead.

Mainly so I can do this:

 ![Screenshot_20201004-103011](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/8/8a307733969f1efbf6dcb622457439b1f9cabd64.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: [October 4, 2020, 4:23pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/30 "2020-10-04T16:23:55Z")

</div>

Yeah I was using alignments but didn’t get what I want so I tried inserting empty characters but didn’t align correctly as well 😅

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [October 4, 2020, 4:31pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/31 "2020-10-04T16:31:27Z")

</div>

Since we are throwing CSS all over the app, might as well switch to html tables too. Gives you a lot more control and that’s what markdown renders to anyway, so I don’t feel so bad about using it. 😉

I tried really hard to emulate my table in markdown so I have it ready if needed, but I could never get the table to span the width of the screen and look decent. It’s a dynamically build table using templates and lookups.

I think it would be awesome if glide provided the same function, but as a new type of list. Then I could just display it from a relation in an inline list exactly how it looks as an html table.

---

<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: [October 4, 2020, 5:04pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/32 "2020-10-04T17:04:29Z")

</div>

Thank you Jeff, I’ll definitely try that at some point during next week! Have a nice Sunday yourself.

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [October 4, 2020, 6:20pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/33 "2020-10-04T18:20:48Z")

</div>

@ThinhDinh I use the `<center>` into the `<th>` or `<td>`, and I also can manipulate the font size, take a look in this exxemple below

```
<table style="width:100%; ">
 <tr>
    <th><center><h1>MEDIA</b> </th>
    <th><center> # Classificações </b> </th>
 <tr>
    <td><center> de 5 </th>
    <td></th>
 </tr>

```

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/7/7e6dd7911c54d7205541b16ddd552b30a468cff2.png)

But you can also try

`<th style="text-align: right">` setting to right or left if you need.

---

<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: [October 4, 2020, 10:21pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/34 "2020-10-04T22:21:38Z")

</div>

Thank you brother I’m sure it will work 😍

---

<div class="post-metadata">

### Author: ![11145](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11145/32/15195_2.png) [@11145](https://community.glideapps.com/u/11145)
#### Post date: [October 20, 2020, 10:03am UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/35 "2020-10-20T10:03:55Z")

</div>

This is a rudimentary question and I’m sorry, but I couldn’t expand the image using Lucas code like you

 ![スクリーンショット (155)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/6/6b95470f18c0bd33ce76a050ac23532b66678461.jpeg) . What’s wrong with me?

---

<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: [October 20, 2020, 11:52am UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/36 "2020-10-20T11:52:52Z")

</div>

Did you include the image in the URL part in rich text code?

---

<div class="post-metadata">

### Author: ![11145](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11145/32/15195_2.png) [@11145](https://community.glideapps.com/u/11145)
#### Post date: [October 20, 2020, 12:52pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/37 "2020-10-20T12:52:41Z")

</div>

I tried to include the URL of the image, but it looks like the posted photo.

Sorry for asking so many questions.

 ![スクリーンショット (157)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/0/0e3d22e726d1d17726d17138a89495ad18130a81.jpeg)

---

<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: [October 20, 2020, 4:58pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/38 "2020-10-20T16:58:49Z")

</div>

You can try this.

```
<p>
<a style="position: absolute; width:100%; top: -105px; right: 0%; z-index:-2; opacity: 1" target="_blank" rel="noopener"></a>
</p>
<a style="position: absolute; width:100%; top: -105px; right: 0%; z-index:-2; opacity: 1" target="_blank" rel="noopener">
<div style="background: linear-gradient(to top, #282828 25%, #787878 75%); margin: 0%; padding-bottom:400px;"></div>
</a>
<p>
<a style="position: absolute; width: auto; top: -105px; right: 0%; z-index:-1; opacity: 0.5;" target="_blank" rel="noopener">
<img style="object-fit: cover;" height="400" src="{I}">
</a>
</p>
```

---

<div class="post-metadata">

### Author: ![11145](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/11145/32/15195_2.png) [@11145](https://community.glideapps.com/u/11145)
#### Post date: [October 20, 2020, 5:15pm UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/39 "2020-10-20T17:15:43Z")

</div>

Thank you ThinhDinh for teaching me so kindly. I’ll get right on it!

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [October 23, 2020, 12:14am UTC](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296/40 "2020-10-23T00:14:31Z")

</div>

## Updated - Nav bar transparent

```
<div><div>
<style>
.glide-app-bar, .sc-fWWZrV {
    backdrop-filter: blur(0px);
    background:transparent;
    -webkit-backdrop-filter: blur(0px);
}
#app-root div[opacity='1'] {
  color: transparent; 
}
```

[Previous page](https://community.glideapps.com/t/expand-image-and-title-component-to-edge-of-screen/4296.md?page=1)
