Centering a form


#1

Hello,

I’m having a hard time trying to center a form, since I have very very limited CSS knowledge.

I’m trying to center the second form of the following URL, incluiding the text " ESCRIBINOS AHORA Y TE CONTAMOS"

The form and that text are in a SiteOrigin Editor. The text is the title of that widget.

What I did so far was adding the following CSS code in Aditional CSS of the Customizer:

    .promo-cultivo-form {
    	display: flex;
      align-items: center;
    }

And on the field “widget class” of the SiteOrigin editor, I entered promo-cultivo-form.

This is the URL:

Any ideas??

Thanks a lot in advance!


#2

Hi there,

Please try to using this CSS code below

@media (min-width:768px){
   #hbspt-form-1546304627405-6313968304 {
      width: 54%;
      margin: auto;
      padding-left: 45px;
  }
}

#3

Nop… haven’t changed a bit.

I even tried using #hbspt-form instead of the one you used, as that it’s the class of the div.

One side note: there’s a warning message of the customizer saying that “using width with padding-left can sometimes make elements larger than you expect.”

One last thing. Keep in mind that I’m trying to center all the elements of that second form on all devices.

Thanks!


#4

Finally, I’ve found how to solve this.

First, on the SiteOrigin Editor that contains the form, I’ve filled the field “widget class” with .promo-cultivo.

Then I changed #hbspt-form-1546304627405-6313968304 and use .promo-cultivo instead.

It worked like a charm. :slight_smile:

Thanks a lot!


#5

Hi,

I am sorry for late reply. I’ve just re-checked my code in above and yes… it’s not working because I notice the element id #hbspt-form-1546304627405-6313968304 is always changed every time the page loaded.

I can see your custom class to the element and it’s working. Awesome!