Styling issues with a form on a webpage

[christhomas]

I've created an website page in the HubSpot Template, HubStrap Lite. I've tried to add a form to this page however I haven't been able to target the form and edit to the CSS so that it displays correctly. I'd like the form to be centred, much smaller and with smaller gaps between each section of the form but I can't edit it. This is a page that highlights the issue with the form: https://www.oneupcoworking.com/?hs_preview=KgFVFQof-24452293028

Any suggestions on how I would be able to style the form? 

Thanks,

Chris

[Kevin-C · Accepted solution]

Hey @christhomas 

So there is a lot going on here!

On one of the HS layout modules a font-size of 100px has been applied.

This combined with the line-height property, inherited from the body tag adds up to some aggressively tall elements (I'm not a fan of applying line-height on the body tag I prefer BEM style css application).

So we remove that and it'll look like this:

To center this I would advise you use the drag and drop template editor as it would be the easiest and wouldn't require any css to be overriden.

EDIT:

These IDs might be dynamic, so the solution below might not be viable.

But you could and some css like so:

form#hsForm_c3016f0f-6ce5-4ba8-8d18-a63ccb17e242_2091 {
  width: 100%; /* make the form fluid */
  max-width: 500px; /* change max width here */
  margin: auto; /* center it */
}

form#hsForm_c3016f0f-6ce5-4ba8-8d18-a63ccb17e242_2091 input[type="email"],
form#hsForm_c3016f0f-6ce5-4ba8-8d18-a63ccb17e242_2091 input[type="text"] {
  width: 100%; /* set width to prevent overflow */
}

Now it looks like this:

Now to your trouble targeting the form:

This might be due to the very specific CSS that is applied via an inline style tag. So you'd have to try to get more specific to style these elements any further. This code CSS looks like this:

#hs_cos_wrapper_widget_24452293032  { display: block !important; opacity: 1 !important }
#hs_cos_wrapper_widget_24452293032 input[type="text"] { background-color: #FFFFFF !important; background-image: none !important; border-color: #000000 !important; border-radius: 115px !important; border-style: solid !important; color: #000000 !important; font-size: 50px !important; text-align: center !important }
#hs_cos_wrapper_widget_24452293032 input[type="email"] { background-color: #FFFFFF !important; background-image: none !important; border-color: #000000 !important; border-radius: 115px !important; border-style: solid !important; color: #000000 !important; font-size: 50px !important; text-align: center !important }
#hs_cos_wrapper_widget_24452293032 textarea { background-color: #FFFFFF !important; background-image: none !important; border-color: #000000 !important; border-radius: 115px !important; border-style: solid !important; color: #000000 !important; font-size: 50px !important; text-align: center !important }
#hs_cos_wrapper_widget_24452293032 input[type="number"] { background-color: #FFFFFF !important; background-image: none !important; border-color: #000000 !important; border-radius: 115px !important; border-style: solid !important; color: #000000 !important; font-size: 50px !important; text-align: center !important }
#hs_cos_wrapper_widget_24452293032 select { background-color: #FFFFFF !important; background-image: none !important; border-color: #000000 !important; border-radius: 115px !important; border-style: solid !important; color: #000000 !important; font-size: 50px !important; text-align: center !important }
#hs_cos_wrapper_widget_24452293032 input[type="file"] { background-color: #FFFFFF !important; background-image: none !important; border-color: #000000 !important; border-radius: 115px !important; border-style: solid !important; color: #000000 !important; font-size: 50px !important; text-align: center !important }
#hs_cos_wrapper_widget_24452293032 input[type="tel"] { background-color: #FFFFFF !important; background-image: none !important; border-color: #000000 !important; border-radius: 115px !important; border-style: solid !important; color: #000000 !important; font-size: 50px !important; text-align: center !important }
#hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) { color: #000000 !important; font-size: 50px !important }
#hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) p , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) li , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) span , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) label , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) h1 , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) h2 , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) h3 , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) h4 , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) h5 , #hs_cos_wrapper_widget_24452293032 label:not(.hs-error-msg) h6  { color: #000000 !important; font-size: 50px !important }

Now I'm not sure but this CSS maybe coming from the form editor. You could select to have the form be output unstyled and then styling would be a lot easier.

Hope this helps get you moving!