# Beautiful Design App

**URL:** <https://community.glideapps.com/t/beautiful-design-app/16191>\
**Category:** Project Showcase\
**Created:** [September 22, 2020, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191 "2020-09-22T12:23:59Z")\
**Posts on this page:** 20\
**Page:** 10

<div class="post-metadata">

**Author:** ![Community\_Fridge](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/community_fridge/32/1905_2.png) [@Community\_Fridge](https://community.glideapps.com/u/Community_Fridge)\
**Post date:** [December 20, 2020, 7:27pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/183 "2020-12-20T19:27:12Z")

</div>

how do i get the image centered?

---

<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:** [December 20, 2020, 11:50pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/184 "2020-12-20T23:50:30Z")

</div>

It’s a CSS trick, as you may have found many examples from this thread 😉

---

<div class="post-metadata">

**Author:** ![Community\_Fridge](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/community_fridge/32/1905_2.png) [@Community\_Fridge](https://community.glideapps.com/u/Community_Fridge)\
**Post date:** [December 21, 2020, 1:04am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/185 "2020-12-21T01:04:22Z")

</div>

Can you show me how to Center the profile image ?

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [December 21, 2020, 3:42pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/188 "2020-12-21T15:42:44Z")

</div>

> Blockquote[quote=“Lucas\_Pires, post:46, topic:16191”]

```auto
<center><div style="background-image: url(AVATAR); 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border: 1px solid white; 
width:200px; 
height:200px; 
background-repeat: 
no-repeat, center; 
back ground-attachment:scroll; 
background-size: cover; 
background-position: center center;"></div>
<h2>NAME</h2>
TITLE

```

[/quote]

Use a template column and replace Name, Avatar and Tittle with your values from user’s tab. Then place the template on a Rich text component

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 27, 2020, 11:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/189 "2020-12-27T23:00:04Z")

</div>

Does anyone know the ccs name for inline lists. Im trying to shrink the length of an inline list to not go full screen but only 90% of the screen. And have it scroll within itself.

---

<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:** [December 28, 2020, 12:12am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/190 "2020-12-28T00:12:40Z")

</div>

There are different variations of them…a horizontal list vs a vertical list have different class names, for example.

---

<div class="post-metadata">

**Author:** ![Tuttografica](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tuttografica/32/16484_2.png) [@Tuttografica](https://community.glideapps.com/u/Tuttografica)\
**Post date:** [December 28, 2020, 1:46am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/191 "2020-12-28T01:46:19Z")

</div>

I congratulate you, your applications are always great and solve specific problems.  
Cheers  
Dario

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 28, 2020, 2:02am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/192 "2020-12-28T02:02:38Z")

</div>

Vertical inline

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [December 28, 2020, 2:08am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/193 "2020-12-28T02:08:58Z")

</div>

Thank you sir, I try to make them something worth using and not just a waste of time for you guys.

---

<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:** [December 28, 2020, 2:51am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/194 "2020-12-28T02:51:25Z")

</div>

Which layout?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 28, 2020, 3:06am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/195 "2020-12-28T03:06:57Z")

</div>

I think mine is very deferent than most of Apps here, take a look:

> **[E-store](https://e-strore.glideapp.io/dl/ewAiAHQAIgA6ADEAMgAsACIAcwAiADoAIgBjAGwAYQBzAHMALQBHAGEAbQBlAHMAIgAsACIAcgAiADoAIgBlAGcASwBsAHMAdgBhAGIAUgA4AEMALgBzAEQAawBUAEQALgAxAGEAeABBACIALAAiAG4AIgA6ACIAVABpAGMAIABUAGEAYwAgACIAfQA=)**
>
> Online bidding App

 ![Proposal 2020-12-26 at 5.29.19 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/b/fb97f2e53ea39e9c2a6e2c1f208705630bf4527b.jpeg) ![Proposal 2020-12-26 at 5.29.49 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/952c02f57edee95a92af6ea61b05f72b90d67324.jpeg) ![Proposal 2020-12-26 at 5.30.22 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/c/7c1706a8477741e1235e20104014f2160e35a4b3.jpeg) ![Proposal 2020-12-26 at 5.30.43 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13868b31123ca9bd0debd0f521d1a73b54bbad37.jpeg)

 ![Proposal 2020-12-28 at 2.29.34 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/193279f4bdbe81a1bdbe796dea5de99216ab5c6d.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 28, 2020, 3:26am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/196 "2020-12-28T03:26:05Z")

</div>

wow! where do you put the code???

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 28, 2020, 3:39am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/197 "2020-12-28T03:39:45Z")

</div>

In a Rich Text element.  
Typically, these types of CSS tricks are used with Template columns - which then allows you to use substitutions to make them more dynamic.

Note that Glide doesn’t officially support CSS in Rich Text elements, and the class names could change at any time. So use at your own risk.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 28, 2020, 3:54am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/198 "2020-12-28T03:54:58Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> <pre><span><style>
> .tile-image-area :nth-child(1) img {
> height: 150px;
> width: 150px;
> border-radius: 50%;
> margin: 10px;
> }
> 
> [data-test="tile-item"] {
> border: solid 1px #9ec1cc;
> }
> 
> [data-test="app-tag-overlay"] {
> position: absolute;
> right: 10px;
> bottom: 10px;
> border-radius: 5px;
> font-size: 1rem;
> padding: 10px;
> text-transform: unset;
> }
> .tile-title {
> position: absolute;
> top: 10%;
> right: 10px;
> white-space: pre-wrap !important;
> overflow: visible !important;
> text-align: left !important;
> width: 150px;
> font-weight: 700 !important;
> font-size: 1.3rem !important;
> line-height: 1.5rem !important;
> }
> 
> .tile-image-area {
> height: 170px;
> }
> 
> ```

cool, but is affecting whole tab… this trick is good if you only have a 1 list for whole tab  
anyway… is nice tnx

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 28, 2020, 3:59am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/199 "2020-12-28T03:59:08Z")

</div>

You can target individual components if you’re prepared to dig through the source and discover the class/element names. But again, it’s not officially supported so you need to be careful.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 28, 2020, 3:59am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/200 "2020-12-28T03:59:09Z")

</div>

is there a gallery of this kind of codes somewhere ?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 28, 2020, 4:00am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/201 "2020-12-28T04:00:57Z")

</div>

You’ll find lots of examples in this thread, actually.  
Those that use it a lot tend to maintain their own “cheat sheets”, I think. (I do).

---

<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:** [December 28, 2020, 2:38pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/202 "2020-12-28T14:38:28Z")

</div>

Right. I have my own Google Keep library with my CSS:

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

---

<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:** [December 28, 2020, 3:17pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/203 "2020-12-28T15:17:09Z")

</div>

And now I want this non-aligned-card design too! 🤣

---

<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:** [December 28, 2020, 5:26pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/204 "2020-12-28T17:26:15Z")

</div>

Called “masonry” layout. Ya, that’d be nice.

[Previous page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=9)

[Next page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=11)