How to type the password to password protect page when the height covered area

[Shawnmanor]

#628667

I create a page that password protected. But visitors can’t type the password, because of header covers the area of textbox, and I don’t want to reduce the size of the header.

How to fix?

[marklchaves]

#628721

Gotta link? Is this happening on desktop, tablet, on mobile? Portrait or landscape mode? Chrome, Safari? All of the above? What kind of HTML/CSS container is your password input field in? Are you using a third-party plugin or the Fusion Builder Login element? Or, are you using basic HTTP auth?

Without seeing your page or code, I can only guess. Maybe you can add padding-top to the parent of your password field or set z-index to 1000. Maybe you can share a link next time?

Read more here about asking for tech help. https://medium.com/@marklchaves/lifehacking-the-right-way-to-ask-for-help-tech-support-series-part-1-cb4d0da37eb5

[Shawnmanor]

#628945

Here is the link: http://www.satinsash.com/?page_id=24

[marklchaves]

#628950

Getting a bad link. See screen capture.

https://imgur.com/a/oQn97Ra

[marklchaves]

#628954

I see it now.

Try adding this to your custom CSS area (global in Additional CSS or just for this page). I tested 10rem on mobile, pad, and desktop viewports (portrait and landscape). 10rem should be fine, but feel free to adjust.

.post-password-form {
    padding-top: 10rem;
}

Avoid using pixels. Use rem, em, or % units in this case.

If you don’t know how to add CSS in Avada, please read this too https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/

Good luck!

[marklchaves]

#628955

By the way. As an aside topic. You should really get your site on SSL.

[Shawnmanor]

#628966

Really thanks, the css code works. But another problem here, when I type in the password”123″ and press the button”entre”, the page turns to empty.

[Shawnmanor]

#629342

Help me,
problem here, when I type in the password”123″ and press the button”entre”, the page turns to white screen, nothing here?

[ckratsasTT]

#797973

Hey all – I’m having a similar issue where the header is covering the password form, but the above CSS doesn’t appear to fix it :/ Any ideas?

Link to affected page: https://touchtown.com/customer-stories

[Author]

Posts