Fixed Textbox in Gridder
-
Hey
I've created a centered/fixed text-element on this Page:
http://leandrodisler.com/archiv
Password is: helloI've made a regular textbox in the gridder and gave it a HTML class.
This is in my Custom CSS:.archive{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}Now the Problem: as you see the element is fixed and centered first but when i scroll the element jumps and takes a new position.
What could be the reason for this?
ps. Also i would love to have this text in front of the whole content of the site, is this possible?
Thanks
-
I now changed it to:
.archive{
position: fixed;
top: 35%;
}Now the textbox dont jumps. But i dont have the exact reult as i wanted with the position...
-
Dear @leandrodisler
centering an element vertically is still a pain in the ass in 2018.
There are many ways to achieve this.
But in your case I would go for the super-simple solution:
Give the font a proportional size (vh) and and position it like that.Since you do not have a dynamic text inside – this is totally possible.
Best!
Marius
-
Like this?
.archive{
font-size:40vh;
position: fixed;
top: 32%;
} -
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it