Decrease Font Size for Contact Form Heading - Both Desktop & Mobile

Store Design
, ,

Topic summary

Goal: Reduce the font size of the Contact form field labels (“Name,” “Company (Optional),” “Email,” “Message”) on both desktop and mobile.

Progress and attempts:

  • Initial CSS suggested: a template-based selector targeting .contact-form labels at 12px. It did not work when added to style.css or theme.liquid.
  • Follow-up suggested adding !important to the same selector, but selector typos/spaces likely prevented it from applying.

Working solution provided:

  • Add CSS via Shopify > Theme > Customize > Theme settings > Custom CSS:
    form#contact_form .flexible-layout.flexible-layout–form label { font-size: 12px !important; }
  • A screenshot was shared showing the reduced label size as proof of effect.

Outcome and status:

  • A concrete, theme-customizer-based CSS fix is provided and demonstrated. The original poster has not explicitly confirmed, but evidence suggests the issue is effectively resolved.

Notes:

  • The key change is using a more specific selector tied to the contact form markup and !important to override theme styles.
Summarized with AI on December 13. AI used: gpt-5.
1

Decrease Font Size for Contact Form Heading - Both Desktop & Mobile

URL: https://duoarthouse.com.au/pages/contact

IMG_1841.PNG
IMG_1841.PNG1290×2796 208 KB

2

@duart2023 which header size do you want to reduce? I think the header text has been removed

3

Hi @suyash1 It is the text where it has ‘Name’ , ‘Company (Optional)’, ‘Email’, ‘Message’. Can you please help?

4

Hi @Tosynos_dev It is the text where it has ‘Name’ , ‘Company (Optional)’, ‘Email’, ‘Message’. I would like it decreased on both mobile and desktop. Can you please help?

5

@duart2023 - add this css

.template-suffix-contact .contact-form label{font-size: 12px;}
6

Sorry @suyash1 Unfortunately that code didn’t work. Tried placing in style ccs and theme liquid.

7

@duart2023 - add !important to it, so it becomes

.template-suffix-contact .contact-form label{font-size: 12px !important;}
8

Hi @duart2023

You can change the font size following this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

form#contact_form .flexible-layout.flexible-layout--form label {
    font-size: 12px !important;
}

Here is the result :

LizHoang_0-1733462296712.png
LizHoang_0-1733462296712.png1368×547 139 KB

I hope it helps.

Thank you