How to center text in dropdown menu on form block (on mobile)

Hi there,

I was wondering if anyone can help me centre the text on my dropdown menu inside the form block on mobile?

I am currently using the following code which works on desktop but not mobile:

.form-wrapper .field-list .field select {
     text-align: center;

}

I tried adjusting it to mobile by adding:

@media only screen and (max-width:768px) 

but that didn't work either.

My website is: https://thelonecrowd.com/contact

Password: portfolio

Thank you!

Hi,

Center these text?

On 1/26/2023 at 1:03 PM, tuanphan said:

Hi,

Center these text?

 yes that text , on mobile and tablet

Select menus are difficult to style because browsers hand off the menu display to the computer operating system.

On 1/29/2023 at 9:57 PM, creedon said:

Select menus are difficult to style because browsers hand off the menu display to the computer operating system.

Oh sorry I made a mistake. To be clear, it isnt the drop down menu I want to center. I only want to center the first text before clicking on it. See screenshot

Quote

I only want to center the first text before clicking on it.

It appears you solved the issue?

13 hours ago, creedon said:

It appears you solved the issue?

No, I havent.

It currently works only desktop but on mobile and tablet, the text is still on the left.

I want it to be centered

2 hours ago, TLCDesign said:

It currently works only desktop but on mobile and tablet, the text is still on the left.

I see what you mean. I don't have a solution.

For anyone else looking into this issue. I observed that the text is centered on DevTools mobile emulator. Not surprising as the emulator is not perfect. On iOS/Safari the text is left aligned. 

@tuanphan  do you have any solutions to this please?

On 2/2/2023 at 7:04 PM, TLCDesign said:

@tuanphan  do you have any solutions to this please?

Try this CSS (Design > Custom CSS)

.form-wrapper .field-list .field select {
    text-align: center !important;
}