Jump to content

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

Recommended Posts

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!

 

 

Edited by TLCDesign
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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

 

 

IMG_36086337AAD4-1.jpeg

Link to comment
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

Link to comment
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. 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.