Hubspot form falling short of full width

Occasional Contributor

Site: http://staging.safetybathtubs.com/store/

 

OceanWP, ElementorPro

 

So I've got my form done and embedded, but it shows up alligned to the right and filling about 50% of the page.  I've got minimal css and html, but I can't get the form to go full width.  Please help!

 

Rabbyt

Reply
0 Upvotes
7 Replies
HubSpot Moderator

Hi, 

 

Currently there is minimal CSS that pulls through with the forms on different pages. Each of the fieldsets have a max-width of 500px. In order to center the form on page you could use margin: 0 auto; in order to remove the margin: 0; which is currently set and set that to margin: 0 auto; which will center your form for you. You can use the following to override the default styles in your current stylesheet

 

 

.hbspt-form .hs-form fieldset {
  margin: 0 auto;
}

 

 

Screenshot at Nov 26 22-01-31.png

Occasional Contributor

Following what @jzilch said, if you don't want to center the form, remove the max-width that has been set for the fieldsets.

 

community.PNG

 

 

 

 

 

Occasional Contributor

Thank you so much for the replies!

 

I've taken the code you gave me, as well as this code, as I believe I am going for the look described in the second response:

.hs-form fieldset {
max-width: none!important;
}

And I have placed it in the header section of my theme's css sheet, also in the css windows given in my theme's visual customizer, also as independant elements in the header and on the page, and even tacked it onto the css of the html element in my elementor builder.  Unfortunately I don't seem to have any movement Smiley Sad 

 

May I please get a little more direction on where this code might fit into the puzzle?  

Thank you so much for your time, everyone!

HubSpot Moderator

Hi, 

 

I took a look and I do not see the code being applied to the above element which leads me to believe that the code isn't being added to the page. This is where it does get a bit tricky as every enviornment is different and even if you're using Wordpress not all themes are the same. It does seem like a lot of the other styles are coming from a main-style.css file but not able to see where that might be located in your current theme. I also did find this article here from Elementor which I believe is the Wordpress Theme you're using on how to add in Custom CSS. https://docs.elementor.com/article/95-custom-css. 

Occasional Contributor

Oh dear!  Still no success.  I've got this code, and many variations, in every little css hole I can find.  I even tried to stick it into the code before it brings up the form:

<style>
.hs-form fieldset {
max-width: none!important;

}
</style>

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>

<script>
hbspt.forms.create({
portalId: "4930243",
formId: "217d12be-3302-4826-af9a-f6c58249d75c"
});
</script>

I've also search through all my theme's css pages, and none of them are labelled main-style.css!  If you just meant the main css in general, then I did locate it and throw it there.

 

Is there something that I can do to better facilitate some help?  Or are there other coder communities outside of the hubspot forums that are reccomended resources?

Occasional Contributor

Bump! <3 

Highlighted
HubSpot Moderator

Hi, 

 

Stackoverflow is another great resource and huge community. This forum will have more information and developers who deal more closely with Wordpress and the Elementor Theme so Stackoverflow might be a better resource. I did find this video here which shows how to add Custom CSS which may help to confirm you're adding it in the correct place. https://www.youtube.com/watch?v=BZ9RCEU6ph8