Footer form moving to the right on different pages

Support
#1

Hi,

We noticed a slight issue on the footer form of the website we were working on. On ALL but two pages, the form looks as it should. On two pages, though, the form is pushed slightly to the right.
We used a third party plugin and we modified the CSS to make the form look minimal, but we’re not sure where exactly things went wrong in the CSS to have the form field be moved to the right on only two pages.

Here are pages where the footer form looks normal:




And here are pages where it’s moved to the right:


Screenshots of the footer form field for additional clarification:

normal looking

moved to the right

Any input would be amazing and appreciated! Let us know if you need any more info from us.

#2

Hi @INcroatia,

It is because of the code you are using to pull the form to the left.

You currently use:

div#ctct-form-wrapper-0.ctct-form-wrapper {
    margin-top: 100px;
    margin-right: 15%;
    margin-left: -10%;
}

In the pages that the pages where the form is aligned correctly, the form has the ID #ctct-form-wrapper-0 which is correct with the code you are using.

But on the pages where the code does not work, the ID for the form is different:

So what you can do is to either, update the code to:

div#ctct-form-wrapper-0.ctct-form-wrapper,
div#ctct-form-wrapper-2.ctct-form-wrapper {
    margin-top: 100px;
    margin-right: 15%;
    margin-left: -10%;
}

Or instead of using the code and adding it to the Global CSS, try this code in the Element CSS of the text element that contains the form:

$el.x-text .ctct-form-wrapper {
    margin-top: 100px;
    margin-right: 15%;
    margin-left: -10%;
}

Hope this helps.

1 Like
#3

Brilliant! Thank you @Jade, you saved the day once again!

We went with adding div#ctct-form-wrapper-2.ctct-form-wrapper and fiddling a bit more with it. It works perfect now!

#4

We are happy to help,

Cheers!

1 Like
#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.