Tell Glide how you use CSS

General
22

Thanks for taking the time to address this, @Jason. I’m sure this thread will become pretty long, pretty quickly.

CSS Use: More efficient use of space

Every component takes up visual real estate. I use CSS often to adjust the margins/paddings/locations of components to make better use of space so that content isn’t “below the fold”.

Before:

Screen Shot 2021-06-04 at 2.43.21 PM
Screen Shot 2021-06-04 at 2.43.21 PM744×850 104 KB

After:

Screen Shot 2021-06-04 at 2.43.29 PM
Screen Shot 2021-06-04 at 2.43.29 PM796×444 69.3 KB 

<pre><span><style>
[data-test="app-summary"] {
margin-top: -90px;
}

[data-test="glide-app-bar"] :nth-child(1) {
background: transparent !important;
}

[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background:transparent;
    -webkit-backdrop-filter: blur(2px);
    }

#app-root div[opacity='1'] {
      color: transparent; 
    }

[data-test="app-summary"] >:nth-child(1) {
height: 150px !important;
}

[data-test="app-summary"] >:nth-child(1) >:nth-child(1) >:nth-child(2) >:nth-child(1) {
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3)) !important;
}

//[data-test="app-summary-title"], [data-test="app-summary-subtitle"] {
text-align: center;
}

.tile-inner {
width: 50px;
}

.tile-image-area {
border: solid 4px white;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 40px;
}
.inner {
grid-template-columns: repeat(10, 25px) !important;
}

[data-test="app-button-view"] {
margin-top: -50px;
position: fixed;
right: 0;
padding: 0 20px;
min-height: 35px;
}
26 Likes