How to change size of Contact Form in Studio Theme

Store Design
,

Topic summary

A user seeks help adjusting the contact form size in Shopify’s Studio Theme, as previous CSS attempts haven’t worked.

Solutions Provided:

  • ThePrimeWeb suggested adding CSS code to theme.liquid file below the <head> tag, targeting desktop (1200px) and mobile (600px) widths. However, the user lacks access to customize theme.liquid in the free template version.

  • websensepro recommended adding CSS to base.css file:

.contact { max-width: 1200px !important; }
@media screen and (max-width: 898px) {
  .contact { max-width: 600px !important; }
}

This partially worked but only affected the top fields (name/email), not the bottom portion of the form.

  • Raj-webdesigner provided a more specific CSS solution targeting the contact form section with custom padding and max-width values in base.css.

Resolution:
The user confirmed that after retrying one of the suggested codes, it eventually worked successfully.

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

Who can help? I want to change the size of the contact form in Studio Theme

Just want to play around with different sizes until it fits with the overall design

I tried some CSS suggestions but they don’t work with the Studio theme

Thanks in advance

2

Hi @ntlee ,

Could you please share your store url link?

Thanks

3

Hi Websensepro, here it is:

https://feelinglikecrab.myshopify.com/pages/contact

4

Hey @ntlee ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

1200px is desktop, 600px is mobile

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711368171081.jpeg
ThePrimeWeb_0-1711368171081.jpeg1253×933 87.9 KB

5

Hi @ntlee ,

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.contact {
    max-width: 1200px !important;
}

@media only screen and (max-width: 998px) {
    .contact {
        max-width: 600px !important;
    }    
}

Thanks

1 Like
6

Thanks ThePrimeWeb, but I don’t have the option to customize Liquid. I think it’s because the free template doesn’t allow it.

7

This works, but it only changes the top part, name and email field. It doesn’t affect the bottom part of the contact form.

8

Alright, you want to adjust the size of the contact form’s bottom part?

9

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

Try This Code

#shopify-section-template--20958478795084__contact_form_RFiRPY .color-scheme-1.gradient .contact.page-width--narrow {
    max-width: 1000px !important;
    padding: 0 50px 50px;
}
10

i tried this code again today and somehow today it came through, it works!