# Embedded form not showing full width inside container

**URL:** <https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436>\
**Category:** Lead Capture Tools\
**Tags:** forms\
**Created:** [March 21, 2025, 3:44pm UTC](https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436 "2025-03-21T15:44:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![KrisAndrae](https://avatars.discourse-cdn.com/v4/letter/k/f19dbf/32.png) [@KrisAndrae](https://community.hubspot.com/u/KrisAndrae)\
**Post date:** [March 21, 2025, 3:44pm UTC](https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436/1 "2025-03-21T15:44:07Z")

</div>

So I am using a simple email form field and submit button only show 80$ width. When you click the submit to show the error message it expands to the correct width. I have tried to target the form and change the width but it only shows the width on the expanded not the initial.

 ![Screenshot 2025-03-21 094654.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/c/c211c2abeb7f00d3b0948169c6f79180aaade106.png)  
how it looks when you land on the page  
 ![Screenshot 2025-03-21 094704.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/8/38a07fc19fe9b38c6e554309fcc0a96b03c144c2.png)  
how it should look as full width  
 ![Screenshot 2025-03-21 103100.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/7/77e04e47f3824305577bd06c89137d60d8bc6ea1.png)  
settings for the very simple form.

this was not working and no other width change works.

style=“max-width: 100%; height: auto; margin-bottom: 1rem;”

---

<div class="post-metadata">

**Author:** ![PamCotton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pamcotton/32/47916_2.png) [@PamCotton](https://community.hubspot.com/u/PamCotton)\
**Post date:** [March 21, 2025, 9:28pm UTC](https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436/2 "2025-03-21T21:28:31Z")

</div>

Hey @KrisAndrae, happy Friday!

Try adding width: 100% to your form’s CSS, along with max-width: 100%. This should ensure the form is full width initially, not just when the error message shows.

To our top experts, @Anton and [@Jigar\_Thakker](https://community.hubspot.com/t5/user/viewprofilepage/user-id/610147) do you have any other recommendations for @KrisAndrae?

Kindly,

Pam

---

<div class="post-metadata">

**Author:** ![KrisAndrae](https://avatars.discourse-cdn.com/v4/letter/k/f19dbf/32.png) [@KrisAndrae](https://community.hubspot.com/u/KrisAndrae)\
**Post date:** [March 25, 2025, 2:17pm UTC](https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436/3 "2025-03-25T14:17:08Z")

</div>

I have tried this both using custom CSS in the block editor as well as using a custom css class and changin the theme css and it did not change anything. No edits of the block, change the width. I have changed other aspects of the form but width is not changing it stays unless you trigger the error then it go’s full width.

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [March 31, 2025, 10:13am UTC](https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436/4 "2025-03-31T10:13:58Z")

</div>

Hi @KrisAndrae, thanks for the additional information!  
Thanks also for sharing the code with us.

On which page can we see this form, please?

I’d love to put you in touch with some of our Top Experts: Hi @Stephanie-OG, @alyssamwilie and @stefen do you have suggestions to help @KrisAndrae, please?  
Have a lovely day and thanks so much in advance for your valuable contributions!  
Warmly,  
Bérangère

---

<div class="post-metadata">

**Author:** ![KrisAndrae](https://avatars.discourse-cdn.com/v4/letter/k/f19dbf/32.png) [@KrisAndrae](https://community.hubspot.com/u/KrisAndrae)\
**Post date:** [March 25, 2025, 2:37pm UTC](https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436/5 "2025-03-25T14:37:01Z")

</div>

This was the styling code I was using that works for everything else but the width. It somehow defaults to 200px.

\<style\>

.receive-updates {

font-family: “stevie-sans”, sans-serif !important;

font-weight: 400 !important;

font-size: 15px !important;

line-height: 17px !important;

margin-bottom: 1rem;

text-align: center;

}

.hs-form .hs\_email input {

width: 100% !important;

max-width: 100% !important;

border-radius: 5px !important;

}

.hs-form .hs\_email input::placeholder {

font-family: “stevie-sans”, sans-serif !important;

font-weight: 400 !important;

font-size: 14px !important;

line-height: 18px !important;

}

/\* ===== FORM FIELD STYLES ===== \*/

.hs-form .hs-input,

.hs-form input[type=“text”],

.hs-form input[type=“email”],

.hs-form input[type=“tel”],

.hs-form input[type=“number”],

.hs-form textarea {

width: 100% !important;

max-width: 100% !important;

margin: 0 0 1em 0 !important;

border: 1px solid #bfc3c8 !important;

border-radius: 5px !important;

font-family: “stevie-sans”, sans-serif;

font-size: 14px !important;

line-height: 18px !important;

}

.hs-form .hs-input::placeholder,

.hs-form input[type=“text”]::placeholder,

.hs-form input[type=“email”]::placeholder,

.hs-form input[type=“tel”]::placeholder,

.hs-form input[type=“number”]::placeholder,

.hs-form textarea::placeholder {

color: #bfc3c8 !important;

font-family: “stevie-sans”, sans-serif;

font-size: 14px !important;

line-height: 18px !important;

}

.hs-form .hs-button {

width: 100% !important;

max-width: 100% !important

margin: 0 0 1em 0 !important;

border-radius: 5px !important;

background-color: #82afd7 !important;

color: #fff !important;

font-family: “stevie-sans”, sans-serif;

font-weight: 400;

font-size: 15px !important;

border: none !important;

cursor: pointer;

}

.hs-form .hs-button:hover {

background-color: #fff !important;

color: #82afd7 !important;

outline: 1px solid #bfc3c8 !important;

outline-offset: 0 !important;

border: none !important;

}

.hs-form .hs-form-required {

color: #82afd7 !important;

}

\</style\>

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [April 1, 2025, 5:18pm UTC](https://community.hubspot.com/t/embedded-form-not-showing-full-width-inside-container/128436/6 "2025-04-01T17:18:02Z")

</div>

@KrisAndrae if you can share a page preview would be easier to debug.