CSS help - centering popup box

I put up a popup box on a website, and I managed to center it on my browser, however on mobile the box is all the way to the right. Basically, it's not cross-device compatible.

I can do a bit of CSS, but I'm no expert.

Here is the CSS used for the popup box:


I center the box using the "top" and "left" commands, but no luck in making it centered for mobile too.

Can anyone help me out?

I had another problem with height and width being set in px, and I don't like that.

I fixed height by changing it to auto.

I fixed width by changing it to auto, and adding "padding" and "display:inline-block" to my css.

That seems to have fixed that, I think it's better now for various devices and browsers. Who knows, maybe it's not, but I do what I can...

I still have the problem I outlined in my opening post here...

It's hard to advise with out much of the other code but you can horizontally align a div with margin: auto;

I also had an issue with the text within the popup being too small on mobile devices. So I went googling, and of course landed on the complicated shit of making one CSS for the desktops and one CSS for the mobile devices. Why must it always get complicated?

Then I saw someone mention you can add this "text-size-adjust: 130%;"

I added it in my code, tested on 2 mobile devices, and the text is indeed bigger now. Problem solved.

---

About the problem in my opening post. I set the "top" and "left" commands in % instead of px, and now it's better. It aligns better on desktop, and also better on mobile.

But still it's not perfect on mobile, it's still not centered.

There has to be a better way to center it on mobile devices and have it be nicely centered on desktop too at the same time.

Okay so the problem is now 100% fixed, thank you @UpwardDescent

It was a simple 50% set on both top and left commands, and this added to the CSS - transform: translate(-50%, -50%);

Simple solution, that solved the alignment issue on both desktop and mobile devices. Perfect

Scorpion Ghost said:

Okay so the problem is now 100% fixed, thank you @UpwardDescent

It was a simple 50% set on both top and left commands, and this added to the CSS - transform: translate(-50%, -50%);

Simple solution, that solved the alignment issue on both desktop and mobile devices. Perfect

Click to expand...

You can also use flexbox next time you want to center something using
justify-content: center;
align-items: center;

clevertech74 said:

You can also use flexbox next time you want to center something using
justify-content: center;
align-items: center;

Click to expand...

display: flex;

if you’re going to use this.

DMA81 said:

display: flex;

if you’re going to use this.

Click to expand...

Obviously you should use display: flex (I mention flexbox) in my post

clevertech74 said:

Obviously you should use display: flex (I mention flexbox) in my post

Click to expand...

I’m just making it clear so that someone doesn’t spend an hour trying to figure out why it isn’t working. They obviously don’t know much about css.

DMA81 said:

I’m just making it clear so that someone doesn’t spend an hour trying to figure out why it isn’t working. They obviously don’t know much about css.

Click to expand...

Yes, you are right thanks for making that clear!

DMA81 said:

display: flex;

if you’re going to use this.

Click to expand...

clevertech74 said:

Obviously you should use display: flex (I mention flexbox) in my post

Click to expand...

Thanks guys. Appreciate it