Thks to many of you, I’ve got a cleaner screen with no Top titles, hamburger, nor tab icons bar. Breathing app…
And a full pitch black background instead of the grey that comes with the dark mode theme.
But, there’s a blank left that shows the default grey background.
It’s not the image (the fedora “Indiana Jones / Humphrey Bogart” / Any Private Agent hat) that I can move down, it does not change this PB.
How can I best “cover” this title spot with black.
Thks 
Hi Ly-Mei,
When you leave your tab label blank (no text), at the top of the screen no text appears but the space remains.
In the Glide builder, natively, there is no way around this right now.
The CSS squad might be able address this however 
Thanks, Nathanaël, I feel less stupid already! 
Can you share the CSS snippets you are currently using for this screen, and what layout theme are you using for the app?
<div class="box">
<p class="bece">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/sbbqGI52PLBEQsjYZhMY/pub/kqCrmhXmHdMtnq2hZmn7.png">
Bienvenue<br><br>
Je suis Sharon, <br>
Agent privé du PM.<br><br>
Ma Mission : Ton Autonomisation. <br>
<br>
Ainsi qu’à tous les Product People <br>
en recherche d’amélioration continue. <br><br>
Je suis 1 asset, 1 actif, <br>
1 bien dont les utilisateurs s’approprient<br>
tout au long de leur cycle de vie Produits. <br>
</p>
</div>
<style>
body{
margin: 0;
padding: 0;
}
.box{
position: fixed;
top:0;
width:101%;
margin-left:-4.5%;
height:850px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to bottom, white, #ccc) !important;
}
The future “glowing floating button”, not yet working:
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(2) .floating-btn-style {
background-color: #8F6072;
}
@keyframes glowing {
0% {
background-color: silver;
box-shadow: 0 0 5px white;
}
50% {
background-color: grey;
box-shadow: 0 0 20px white;
}
100% {
background-color: green;
box-shadow: 0 0 5px purple;
}
}
div[id*='screenScrollView'] > div > :nth-of-type(2) .floating-btn-style {
animation: glowing 1300ms infinite; }
<pre><span><style>
[data-test="glide-app-bar"] :nth-child(1) {
display: none;
}
The black background:
<pre><span>
<div class="background"></div>
<style>
html { f}
.background {
position:fixed;
margin-top:0;
background:#000000;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}
The background beaming light image:
<a style="position: fixed;
width: 140%;
top:280px;
right: -30%;
z-index:-1;
" target="_blank" rel="noopener">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/sbbqGI52PLBEQsjYZhMY/pub/hhfHRNjXWEd0gpboVpvq.png" title="" style="">
The hide bottom tab icons menu:
<pre><span><style>
[id="tabBar"]{
display: none;
}
[data-test="glide-app-bar"] :nth-child(1) {
display:;
}
#app-root div[opacity='1'] {
color: transparent;
}
The position of the floating button:
<pre><span><style>
.fab-target >:nth-child(1) {
position: fixed;
top: 50% ;
right: 10%
}
There must be sth conflicting. The above CSS are copied here in order from top to bottom.
And my theme is captured here
Thks
Change the code above to this:
<pre><span><style>
[data-test="glide-app-bar"] :nth-child(1) {
display: none;
}
[data-test="glide-app-bar"] {
background: black;
}
Is this an attempt to make the sole floating button glow? I believe you’re not targeting a floating button here, so please clarify then I can help.
Yes, it is. It’s working as preview in @Uzo Code Book. (My colors are just for testing purposes, as I can’t manage to see them yet). Thks, Uzo, BTW 
But I only copied the CSS so that you can identify if there’s sth conflicting with the background.
looks better, but on my smartphone, there’s still some blank rows
Question: is it in the syntax to repeat the [data-test=“glide-app-bar”] ? instead of adding the new param?
Hi @L.M
Just a question…
Is the search button deactivated in the Options tab?
It can cause this type of effect especially if there are searchable items in your screen, the search option gets activated automatically…
Please check Luther’s question. I can’t replicate that space in my builder.
I don’t understand this question. Can you elaborate?
Thks Luther, well there’s no search activated on this tab, since it’s not even possible in the options.
It’s the 1st tab of my app (and I intend to hide it from the tab icons menu once you open that door).
But the search is activated elsewhere in the app.
I see 2 lines of [data-test=“glide-app-bar”]
Can they be written with only 1 line?
The builder looks fine. It’s on the mobile that the issue occurs.
Anyway, thks for the trouble. I can consider other options. Like the full screen background image if it’s the workaround. Or revert to the theme’s grey for this screen.
Did you enable any search bars on that screen?
No, they are two different things (differentiated by the nth-child part).
<pre><span>
<div class="background"></div>
<style>
html { f}
.background {
position:fixed;
margin-top:0;
background:#000000;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}
Change top: 5.5em to top: 4em and test again. You’re leaving a bit of space there, hence why you see the different color.
Yeah, I noticed a bit difference in screen previews when I tried Android & iOS, so please change the top parameter as I noted in the comment above.
You know what?
I put 0em and it’s working! (4em was a thin row, so I “made an educated guess”, as Malkovitch would say)
You’re awesome, thanks so much
SOLVED
Yes, I’ll have to hope it will be OK on other mobiles… One step at a time.
