How To Center Close Button Full Screen Modal

Foundry
1

Wondering if anyone knows the CSS to center the modal close button in full screen mode?

111
111935×933 60 KB

2

@gnosismedia Hi, here is an example :
.modal {
position: relative; /* Parent container with relative positioning /
width: 300px; / Width of the modal /
height: 200px; / Height of the modal /
padding: 10px; / Inner spacing */
}

.close-button {
position: absolute; /* Absolute position relative to the modal /
top: 10px; / Offset from the top /
right: 10px; / Offset from the right /
width: 20px; / Width of the close button /
height: 20px; / Height of the close button /
cursor: pointer; / Pointer cursor /
text-align: center; / Center the text (the cross here) */
}
X should be rotate to appear less like an X text and more like a cross. Hope it will help.

3

Thank you! When I implemented the CSS code, the modal would no longer open.

4

Hi, could you give us the code you edited ?
Hmm, Second thought, by implementing you don’t mean copy/paste? The example I gave you is one way among many others to do what you want. Everything will depend on the original code you want to modify. It is possible (very likely in fact) that there are missing elements to modify (I can’t guess them) and that not all those proposed are useful for the modifications.
To take up my initial point, I offered you an example hoping that it would help you, not a ready-made solution. Sorry if I wasn’t clear enough. Sincerely.

5

Thank you for the clarification. Yes I did copy/paste what you sent.

6

For anyone else looking to do this, I found the solution:

.ps-3 {
padding-left: 99% !important;
margin-top: 30px !important;
}

2 Likes
7

How did you come up with .ps-3? What does it represent? The code works easily to bring the Close Button over to middle. Just trying to learn. Thanks

8

I used the browser inspect tool and tinkered with the CSS until it was centered.

1 Like