How can I resize a form on my website to half its width?

Store Design
, , , ,

Topic summary

A user needs to resize an embedded form on their Shopify website from full-width to half-width and center it on the page.

Initial Solution:

  • Add CSS code to base.css targeting the specific form section class
  • Set max-width: 50% with padding adjustments (40px top, 25px bottom)

Centering the Form:

  • Apply margin-left: auto and margin-right: auto to the same CSS snippet
  • This centers the form horizontally on the page

Follow-up Issue:
The user successfully implemented the solution but encountered the same problem with a second form on a different page. They’re asking how to apply similar CSS styling to resize and center this new form, suggesting they need guidance on identifying and targeting the new form’s specific section class in their stylesheet.

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

I added a form to my website but it’s the entire width of the page… wondering if there is a way to make it half the size?

https://fleurelleflowerfarm.ca/pages/wedding-form

2

Add the following code to the form :

max-width:50%;
3

I’ve tried adding it to the code but can’t get it to work. Any idea where I should apply it?

Thanks!

1 Like
4

Add the following code to base.css:

.section-template--21629194273090__f6e24410-7478-4bf8-a53c-d030d105cdc6-padding {
    padding-top: 40px;
    padding-bottom: 52px;
    max-width: 50%;
}
1 Like
5

Perfect! Are we able to centre it on the page?

6

Yeah, to the same snipped add the following :

.section-template--21629194273090__f6e24410-7478-4bf8-a53c-d030d105cdc6-padding {
    padding-top: 40px;
    padding-bottom: 52px;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
1 Like
7

Thanks for your help!

1 Like
8

Hi, I added another form on a new page but having the same issue again. How would I re-size and centre to this one?

https://fleurelleflowerfarm.ca/pages/a-la-carte-wedding-form

Thanks!