[darioParticipant]

Hi!

the code worked fine, but I have a problem:

I have 2 mailform in one page, one in the body and one in the sidebar. If I use this code all the mail forms become horizontal. How can I set only the body mail form horizontal and keep the sidebar one (with widget) vertical?

Thank you

[LelyModerator]

Hello There,

Please update the CSS to this:

body .x-main .x-subscribe-form fieldset {
     display:inline-block;
     vertical-align:top;
}

body .x-main .x-subscribe-form fieldset input {
     margin:0 !important;
}

body .x-main .x-subscribe-form {
     width:100%;
     max-width:100% !important;
     text-align:center;
}

If that doesn’t do the trick, please provide your site URL with 2 sidebars so we can check better.

[darioParticipant]

Yes it worked!

But I guess the widget is allined right, as you can see:

How Can I align it to the left?

Many thanks

[darioParticipant]

Sorry, the image link didn’t work, here it is: [http://prntscr.com/85y4rq]

[ChristopherModerator]

Hi there,

I can’t find where you added the form, please provide us with exact URL.

Thanks.

[darioParticipant]

I’m sorry but I’m working locally, i tried to upload a screenshot of my problem but seems broken, i try again here: http://prntscr.com/85y4rq (the form has a red border)

Hope it can be aligned left!

Thanks

[ChristopherModerator]

Hi there,

We need you to upload this page in your live site as it’s hard to guess the right selectors, please try this :

body .x-main .x-subscribe-form fieldset input {
     float:left;
}

If it doesn’t help please upload this page so we can provide you with tailored solution.

Thanks.

[SolomonParticipant]

Hi,

I used the code that you provided for Felix T too and it worked! However, I wonder if it is possible to add something to CSS so that my form title and fields are all on the same line? (with title coming before the fields)

Also, when the page size is decreased (when I’m testing responsive effect), there is no spacing above and below each field – could this be incorporated?

My website: http://selfknowledgemanagement.org

[ThaiModerator]

Hi @solomon,

Try adding following CSS under Appearance > Customize > Custom > CSS:

/* form title same line */
.x-subscribe-form-316 h1 {
    float: left;
}
/* spacing above and below each field */
@media (max-width: 480px){
    body .x-subscribe-form fieldset input {
        margin-bottom: 15px !important;
    }
    body .x-subscribe-form fieldset {
        display: block;
    }
}

Hope it helps.

[SolomonParticipant]

Hi, yes, that did indeed work, thank you!
The elements are not equally centred horizontally though, could this be adjusted?
Also, when resizing, the fields do strange things in terms of their positioning, although when in mobile phone size they look fine…

[ZeshanMember]

Hi Soloman,

Please remove the provided CSS code with following:

/* form title same line */
.x-subscribe-form-316 h1 {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10%;
}
/* spacing above and below each field */
@media (max-width: 480px){
    body .x-subscribe-form fieldset input {
        margin-bottom: 15px !important;
    }
    body .x-subscribe-form fieldset {
        display: block;
    }
}

@media (max-width: 1350px) {
    .x-subscribe-form-316 h1 {
        display: block;
        margin-right: 0;
    }
}

Thanks!

[SolomonParticipant]

Hi, unfortunately the latest code doesn’t improve the issue…

[LelyModerator]

Hello Solomon,

From screen width 913px to 1256px, positions of the fields is strange because there’s not enough space to display everything in one line. What we can do is move the fields on a new line. Please add the following custom CSS:

@media (max-width:1256px) and (min-width: 913px){
.x-subscribe-form-316 h1 {
    float: none;
}
}

Hope this helps.

[SolomonParticipant]

Hi, yes, I think that fixes the responsive issue! The elements still aren’t equally aligned horizontally, but this issue is very subtle…

[LelyModerator]

Hello Solomon,

Glad that the responsive issue is now fixed. Please clarify how you want to display elements horizontally. Perhaps a screenshot will be a great help.

[Author]

Posts