CMS Development

Rabbyt
Participant

Hubspot form falling short of full width

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

0 Upvotes
14 Replies 14
ZacKopelman
Member

Hubspot form falling short of full width

I have a similar issue. Screen Shot 2020-10-07 at 5.37.41 PM.png The form is coming up as a column and does not fit  the entire page

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Hubspot form falling short of full width

hey @ZacKopelman , could you add a link to a page that is having this issue?

0 Upvotes
newbie12
Member

Hubspot form falling short of full width

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

 

 

 

 

 

Rabbyt
Participant

Hubspot form falling short of full width

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 😞 

 

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!

0 Upvotes
jzilch
HubSpot Employee
HubSpot Employee

Hubspot form falling short of full width

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. 

0 Upvotes
Rabbyt
Participant

Hubspot form falling short of full width

Bump! ❤️ 

0 Upvotes
jzilch
HubSpot Employee
HubSpot Employee

Hubspot form falling short of full width

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

0 Upvotes
gruya
Member

Hubspot form falling short of full width

I have a similar issue where I embedded the form into my site and it is coming up only on the left hand side (NOT full width). You can see it here: Soccer Academy in Kissimmee

 

What should I do to make it full width?
Thank you very much

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Hubspot form falling short of full width

@gruya , is this still an issue?

 

0 Upvotes
gruya
Member

Hubspot form falling short of full width

Yes big time.
0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Hubspot form falling short of full width

@gruya you have a width of 300px on the iframe. 

override or remove that 🙂

0 Upvotes
Rabbyt
Participant

Hubspot form falling short of full width

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?

0 Upvotes
jzilch
HubSpot Employee
HubSpot Employee

Hubspot form falling short of full width

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

jk-sone
Participant

Hubspot form falling short of full width

It's a shame there's no way to override this max-width in the styles tab of the form:

jksone_0-1643310699045.png