[Resolved] CSS for passwort protected page

[Erika]

Hey there,
I am fighting with the customizer. I would like to customize the password protected page. I am targeting the form itself.

If I add this CSS in the inspector to the element, all looks good, but when I add it in the customizer, no change occurs.
What do I do wrong?

/*password protected page*/
.post-password-form {
padding: 200px 100px;
height:100vh;
background-color:lightgrey;
text-align: center;
}

label .post-password-form {
color: #000000;
}

Thanks, Erika

[Elvin]

Hi there,

The CSS you’ve added is actually working but perhaps you weren’t able to see with the viewport you’re viewing it at because it has a specified media rule.

The specific CSS you’ve mentioned is wrapped on this media rule @media (min-width: 769px) and (max-width: 1024px) { and actually it doesn’t look like it was wrapped properly as it was missing a }

Observe this recording: https://share.getcloudapp.com/v1uNglrn

You can see that if the width value is within the media rule, the CSS you’ve added applies.

If you want it to apply to all viewports remove this line before it @media (min-width: 769px) and (max-width: 1024px) { so there’s no media rule that affects it.

[Erika]

Thank you so much Elvin, I really missed that code snipped above the right code.

[Elvin]

No problem. 🙂

[Author]

Posts