Contact form field text doesnt fit on mobile

Store Design
, , , ,

Topic summary

A contact form on a Shopify store has text overflow issues on mobile devices, where placeholder text doesn’t fit properly within input fields.

Problem Details:

  • Two custom form fields with long placeholder text:
    • “Do You have staff for customer support/engagement?”
    • “What’s Your website or social media account?”
  • The fields display incorrectly on mobile viewports (shown in attached screenshot)
  • Site URL: automatica.it.com/pages/contact

Proposed Solution:
A CSS fix was suggested to increase the input field height on mobile:

  • Add media query targeting screens under 749px width
  • Set height: 7rem for the ContactForm-Staff input field
  • Code should be added to the theme’s base.css file

Status: Solution provided but not yet confirmed as tested or resolved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

mindageris_0-1738623325431.png
mindageris_0-1738623325431.png583×867 34.3 KB

This is the code:

{% comment %} staff? {% endcomment %}

Do You have staff for customer support/engagement?

{% comment %} Website or social media {% endcomment %}

What's Your website or social media account?

This is the site: https://automatica.it.com/pages/contact

how do I make it fit on mobile?

2

@mindageris oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media (max-width: 749px) {input#ContactForm-Staff {height: 7rem;}}