E-mail form inline

[dhunink]

Hi!

After struggling with the email form plugin for a while I’m really stuck now.

I’ve created a form and added a custom class to it. Following tips form another topic (https://theme.co/apex/forum/t/inline-e-mail-form-not-working/20147/9) I did managed to have some styling.

But I keep struggling to get the form to display really centered. As seen in the attached screenshot the form starts at the horizontal center, instead of being really horizontally centered. How could this be achieved?

In addition: is there an easy way to force the button to be below the inputs and have the exact same width as both inputs together?

Here’s the current result:

Css:

.bwl-subscribe-form-minimal-horizontal{
    width:100%;
    max-width:100% !important;
    text-align:center;
}
.bwl-subscribe-form-minimal-horizontal fieldset{
    display:inline-block;
    vertical-align:top;
}
.bwl-subscribe-form-minimal-horizontal fieldset input{
    margin:0 !important;
}

[ruenel]

Hello There,

Thanks for writing in! Regretfully the given WP credentials is not working for us. Please double check it.

Meanwhile, please update your css and use this:

.bwl-subscribe-form-minimal-horizontal{
    width:100%;
    max-width:100% !important;
    text-align:center;
}
.bwl-subscribe-form-minimal-horizontal fieldset{
    display:inline-block;
    vertical-align:top;
}
.bwl-subscribe-form-minimal-horizontal fieldset input{
    margin:0 !important;
}
.bwl-subscribe-form-minimal-horizontal .tco-subscribe-form input[type="submit"]{
    margin:0 !important;
}

By the way, you will need to edit your slider and position the layer containing the subscription shortcode to be at the center of the slide. You may need to use left: 50% and have a negative margin left of least 280 pixels which will be enough to move the form at the center.

Hope this helps.

[dhunink]

Thanks for the updated CSS.
Pointing towards Revolution Slider helped me to find out that indeed Revolution Slider was messing things up.
In the end I recreated the lay-out using a default Pro Section with parallax background.
The form plays nicely now, with less custom CSS.

Only downside is the way the background image is sized. Parallax in Revolution Slider results in more of the image being visual, while in Pro only the center part is visible.
I know this has something to do with the ‘Cover’ setting for the background. But how is Revolution Slider able to force more of the image to be visible?

Here’s Revolution Slider on Mobile:

Here’s Pro on Mobile:

[rad]

Hi there,

Revolution slider uses its library to calculate the sizing, and it uses javascript and not just CSS. It appears to be a background image, but it’s not. It’s standard image positioned at the back and as a layer. It can’t be achieved by just CSS like the standard background image. Plus, the parallax uses negative offset which hides part of it to create an illusion of background is moving.

And in comparison with the screenshots, the size of the device or view is different. The slider is being displayed as landscape, while the second is the portrait in which the image will cover the entire height. While on the first screenshot, it only covers the width. Have you tried comparing on same device/screen size?

Thanks!