Jump to content

Can't tweak .squareCard width on #loginPage


Recommended Posts


I want to change the base width of the div.card.squareCard.bottomPaddedCard on the login page that is used to display avatars that are not hidden during login.


This width changes based on @@Media min-width variables, so I also want to change all those so the profile images are smaller across the board, but I can't seem to get the CSS code to take effect.


Trying to affect this code (user-id and domain code replaced with question marks)

<div class="card squareCard bottomPaddedCard">
  <div class="cardBox visualCardBox">
    <div class="cardScalable">
      <div class="cardPadder"></div>
      <a class="cardContent" href="#" data-ajax="false" data-haspw="true" data-username="admin" data-userid="?????">
         <div class="cardImage" style="background-image:url('?????/emby/Users/?????/Images/Primary?width=600&tag=?????&quality=90');"></div>
    <div class="cardFooter">
      <div class="cardText">admin</div>
      <div class="cardText">Last seen a minute ago</div>

Looks like the base code for the width of the outer HTML element copied above is only controlled by this, line 307 of card.css

.squareCard {
    width: 50%;

I should be able to override this code by declaring the element in addition to its class, but to be safe I'm declaring two of its parents.

#loginPage #divUsers div.squareCard {
    width: 33.333%;

And it doesn't work. I've already added some small level of anonymity to the login page by hiding the username and last seen time from display. I use the same method and avoid using any !important shortcuts in the css. (Edit: I apply this code in Settings > Branding > Custom css)


I also tried to !important this and it has no effect.


Any ideas?






current live display:



desired display:


Edited by computerprep
Link to comment
Share on other sites


What device are your images from? 
Your code worked fine for me.  What server version?  Have you tried clearing your browser cache?
My Default (@@Media (min-width: 1800px) 12.5%)
Your code just make giant icons.

Tested with 8 user defaulted to 8 user in-line, then changing to 33.33% gave 8 users in your desire display but they were giant images (almost the same a zooming my browser 300%.

Edited by Happy2Play
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...