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

[Rasha]

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

[Lucas_Pires]

Thanks @Rasha

[Rasha]

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

[Lucas_Pires]

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

[kyleheney]

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.

[Lucas_Pires]

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.

[Robert_Petitto]

Good point!

[ThinhDinh]

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

[Jeff_Hager]

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:

[ThinhDinh]

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

[Jeff_Hager]

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.

[ThinhDinh]

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

[Lucas_Pires]

@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>

But you can also try

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

[ThinhDinh]

Thank you brother I’m sure it will work

[11145]

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

. What’s wrong with me?

[ThinhDinh]

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

[11145]

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

Sorry for asking so many questions.

[ThinhDinh]

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>

[11145]

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

[Lucas_Pires]

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; 
}