Layout distortion

Ask for Help
1

Hello everyone,

I made an app to record the results of a tournament and do the ranking.
When I enter the “detail view” and go back it changes the layout.

Here is the phenomenon in video: https://youtu.be/_LdqLt5Ev3M

The app : https://verdant-middle-5910.glideapp.io/

In the inline-list screen i have this Rich Text :

<pre><span><style>

[data-test="list-item"].separator::after {
background-color: lightgreen;
opacity: 0.6;
height: 3px;
}

[data-test="app-hr"] .sep-line {
background-color: lightgreen;
opacity: 0.6;
height: 5px;
}
[data-test="list-item"] .textStyle{
color: Lightgreen;
Font-size : 20px;
}
[data-test="list-item"] .textDetailStyle{
Font-size : 20px;
color: white;
}

And in the Detail View Screen this one :

<pre><span><style>
 [data-test="list-item"]> :nth-of-type(1) {
border: 10px solid lightblue;
  background-color:darkorange;
  height: 180px;
text-align :center;
 }
.textContainer,[data-test="list-item-title"]{
font-size:150px !important;
}
[class="sc-biOYSp jYoDhI"] {
visibility: hidden
}

Thank you.

1 Like
2

It looks like the code does not load at all, or takes a longer time than the timeout. Do you see this behaviour when viewing in an iOS device?

3

It’s the same phenomenon with Android and with IOS…

4

Since it’s CSS I don’t think you can send this to support team… Not one where I can help :frowning: