Resizing a Form

Shopify Discussion
1

I am trying to resize a form on the homepage of my site, but cannot do so.

https://www.jujalighting.co.uk

I can’t get the CSS correct to target this form and manipulate it.

2

Hi @alexrf ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
/* Target the form container */
section._formContainer_stahb_30 {
    width: 100% !important; /* Adjust width as needed, e.g., 600px or 80% */
    max-width: 600px !important; /* Set a maximum width */
    margin: 0 auto; /* Center the form */
    padding: 20px; /* Adjust padding for internal spacing */
}

/* Optional: Adjust the form fieldset for inner content */
form._formFieldset_1nihh_63 {
    width: 100%;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Optional: Adjust individual form fields */
div._formFieldContainer_1ydxd_5 {
    margin-bottom: 15px; /* Adjust spacing between fields */
}

/* Optional: Adjust input fields */
input._formInputField_237zm_7,
textarea._textArea_17mgw_1 {
    width: 97%; /* Ensure inputs take full container width */
    padding: 10px; /* Adjust input padding */
}

/* Optional: Style the submit button */
button._formSubmitButton_1nihh_77 {
    width: 100%; /* Make button full-width */
    padding: 12px; /* Adjust button padding */
}

Thanks!

3

Hello @alexrf

Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

._inline_stahb_47 ._formContainer_stahb_30 {
    min-width: 65% !important;  /* set desired width/
   
}

Result:

screenshoteasy (37).png
screenshoteasy (37).png1336×615 41.5 KB

4

Thank you for such a prompt response.

I’ve just tried implementing it though and am finding that it makes no change to the form at all!

5

@alexrf
Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

._inline_stahb_47 ._formContainer_stahb_30{
    max-width: 70% !important; /* Adjust width as needed, e.g., 80% or 100% */
}
6

Thank you both for your help on this, but I’m still getting no joy. Screen shot below, just in case I’m being a muppet.

Screenshot 2025-06-10 135507.png
Screenshot 2025-06-10 135507.png840×823 46.9 KB

7
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1749560542362.png
websensepro_0-1749560542362.png1214×580 245 KB
8

Sorry, still no joy. I’ve followed the instructions precisely :weary_face:

9

I’ve been doing some more research and testing this afternoon. Literally nothing seems to change this form. However, I have read some articles which I only just barely understand, which relate to the fact that the CSS which controls this form resides in something called the shadow root. If I (or someone else!) knew how to make changes there then it would likely solve this.

Two observations;

  1. Why isn’t this customisable in the app? I just want to change the width!
  2. I have spent more time trying to solve this problem than it has taken to build a fully functional ecommerce site.