Can't tweak .squareCard width on #loginPage

[computerprep 148]

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>
      </a>
    </div>
    <div class="cardFooter">
      <div class="cardText">admin</div>
      <div class="cardText">Last seen a minute ago</div>
    </div>
  </div>
</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?

 

--------------------------------------

 

Screenshots...

 

current live display:

 

desired display:

Edited June 30, 2016 by computerprep

[Happy2Play 9359]

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 June 30, 2016 by Happy2Play