Custom user sign in screen -for new project

Hi there ,
its my 1st ever attempt at this . Almost at the end of my movie app .
need help with enlarging the logo in the user sign in screen .
the same file size is working well on the home screen , but i believe its something to do with a glide UI limitation.. or may be im wrong .

tried this custom css -but no success .
/* Only affect logo on the user sign-in screen /
.auth-screen-wrapper img {
height: 50vh !important; /
50% of viewport height */
width: auto !important;
max-width: 90% !important;
margin: 0 auto 16px auto !important;
object-fit: contain !important;
display: block !important;
}

Task -
Logo to occupy atleast half of the screen . need to be more prominent -like in any real world app .
if its solved thru a custom CSS , then pls help with that here.
Screenshot attached .

this is the img src from inspect . Not sure, if its needed or is accurate.
<img src="https://res.cloudinary.com/glide/image/fetch/f_auto,w_150,h_150,c_lfill/https%3A%2F%2Ffirebasestorage.googleapis.com%2F...">

can someone pls help
cant keep calm - im just at the final stages before sharing with my frnds .
pls help make this happen ..

Regards
Jijo Thomas
+91-9880210339
India

Hi @JIJO_THOMAS :slight_smile:

Custom CSS must be used with caution, as mentioned in the documentation (cf. https://www.glideapps.com/docs/css-for-apps), and may break from time to time.

If you’ve taken this into consideration, here is one possible way to make it work:

div[class^="sign-in-branding"] img {
  max-height: 288px;
  max-width: 288px;
}

This targets the img tag (containing the logo) inside any div whose class name starts with sign-in-branding.
It then forces the max-height and max-width properties to 288px. Feel free to adjust these values as needed.

No guarantee this will remain stable or is the best way to handle it — just a valid option at the time of writing :grinning_face_with_smiling_eyes:


Hopefully this points you in the right direction!

3 Likes