Realigning Login Window

css

(James) #1

Hi, I’m trying to ‘push’ the login container down to be centered with the login background. I’ve tried everything I learned: the transform property, margins, positioning, padding, but I can’t get it right. What am I doing wrong here?


This was taken by a User Agent switcher


(Jeff Atwood) #2

I’m sorry, but it is not within the purview of this forum to teach CSS at length – have you considered taking free CSS courses online?


(James) #5

I have, I’ve been using W3Schools and SoloLearn.


(Kris) #6

You need to look at .modal-middle-container for vertical positioning, and unless you want to target all modals, you need to add specificity.

.login-modal, .create-account {
  .modal-middle-container {
    padding-top: 50px;
  }
}

A good way to figure this stuff out is to start at one of the innermost divs, and work your way outwards. If targeting .modal-header doesn’t work, move up to .modal-inner-container, then modal-middle-container etc


(James) #7

Thank you Kris, that’s a great strategy I’ll definitely use from now on.

I knew it had to be padding-top but I guess I got the element wrong. :sweat_smile: