Please guide, is my CSS correctly applied?
in the Glide builder, the css display is correct as I wanted, but on real devices the changes don’t follow as in the Glide builder.
my css :
.iwmKFQ .bottom-area {
display: flex;
flex-direction: column;
background-color: rgb(15 160 39 / 35%);
padding: 40px 12px 12px;
color: rgb(24 5 184);
-webkit-box-flex: 1;
flex-grow: 1;
}
I attached a screenshot.
Real device
Builder Glide
I use CSS only to change the color.
CSS is not working the same on all devices… try to use Code BOOK App to test codes in real-time… pick the code and click the see it in action button… then change the code button…
This happened because you are using an unstable class name there. It’s likely that the class name is not the same on your testing device. Please never use those random class names.
Try replacing that with this.
<pre><span><style>
[data-test="app-vertical-list"] .bottom-area {
display: flex;
flex-direction: column;
background-color: rgb(15 160 39 / 35%);
padding: 40px 12px 12px;
color: rgb(24 5 184);
-webkit-box-flex: 1;
flex-grow: 1;
}
thanks @ThinhDinh for the guide, this css was successfully implemented in real devices…
I’m new to CSS, is there a way to learn class names…?
You find them using inspect elements. Point the cursor to the element and find a stable class name.
