I have a video widget that is triggered by a button. On tablet and mobile layouts, I would like it to appear centered on the screen.
Is there a way to ensure it always appears vertically centered, regardless of the device?
On some screens, the video appears cropped or off-center.
I don´t exactly get the set up.
But first idea would be to also assign a “anchor-link” to the button, so the page get scrolled to the point where the video is not cropped.
It is a pop up that you open pressing a button
then you would need to fix the popup in the center.
I have them fixed in the center. But when you edit the tablet version, you see the total vertical length of the website, so I can’t know what the exact center is. I don’t have a reference of the top and lower edge of the screen.
if the “center” fixing isnt giving the desired results, then the only option would be to fix this with custom code. you would need javascript/jquery for it if it isn´t possible with pure css values.
Use the dev-tools-inspect option in your browser to find the right container/elements to adress. You change the css values in the devtools to figure out which css values has to be set that the videocontainer is always centered. Then try to create a code that sets the right values for the element.