[gymriteParticipant]

Hi,

I’m pretty new to web page design but cornerstone is really helping me out. I’ve managed to get MailChimp working on my page but want to place the input box and button on the same line. I also don’t want it centre justified but on the left under the strap line.

I’ve ready other posts and used the code provided but none of them have the desired effect. Can you please help me out and maybe give me some insight into what you’ve done so I can learn to do it myself next time?

Here is my website
http://www.littlecactus.co.uk

Ta
Jim

[JadeModerator]

HI Jim,

You can add this under Custom > CSS in the Customizer.

.home .x-subscribe-form fieldset {
    display: block;
    width: 50%;
    float: left;
}

.home .x-subscribe-form input[type="submit"] {
    margin-top: 0;
    height: 51px;
}

.home .x-subscribe-form {
    max-width: 80% !important;
}

Hope this helps.

[gymriteParticipant]

YES! thats way better, thanks. All i need now is for the two items to be 60% their size and aligned to the left under the “mini style with a story to tell” text

Can you do that?

Ta
Jim

[LelyModerator]

Hello Jim,

Please try updating this custom CSS:

.home .x-subscribe-form {
    max-width: 80% !important;
}

To this:

.home .x-subscribe-form {
    max-width: 60% !important;
    float: left;
    width: 100%;
}

Adjust max-width values accordingly. If it doesn’t achieve what you want, please give us screenshot so we can be specific on our suggestion.

Cheers!

[gymriteParticipant]

Thanks, thats’s improved it further. I have reduced the height but in doing so the text is no longer in the middle of the box/button…. can you help me align it please?

I also checked what happens on a mobile phone screen and the formatting doesn’t work, any ideas why?

Thanks
Jim

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input,.x-subscribe-form input[type="submit"] {
    display: inline-block;
    height: 2.45em;
}

Update this code :

.home .x-subscribe-form {
    max-width: 55% !important;
    float: left;
    width: 100%;
    height: 3px;
}

To :

@media (min-width:979px){
.home .x-subscribe-form {
    max-width: 55% !important;
    float: left;
    width: 100%;
    height: 3px;
}
}

Hope that helps.

[LelyModerator]

Hello Jim,

From Jade’s reply and previous reply, please update everything to this:

body {
    overflow: initial;
}
@media (min-width: 980px){
.home .x-subscribe-form input[type="submit"] {
    margin-top: 0;
    height: 52px;
 }
.home .x-subscribe-form>fieldset+fieldset {
    width: 30%;
    float: left;
   display: inline-block;
}
.home .x-subscribe-form>fieldset {
    display: inline-block;
    width: 70%;
    float: left;
}
.home .x-subscribe-form {
    max-width: 60% !important;
    width: 100%;
}

}

This will make it affect the large screen only.

Hope this helps.

[gymriteParticipant]

Hi all,

thanks again for you help. Lely, i tried your code but it didn’t have the same affect as the others. I’ve got something pretty close now, however, the mobile page still isn’t correct. As you can see from the attached image the input box an button don’t match. I’d like them to be the same size and fit nicely in the screen, centre justified. Can you fix it?

I also noticed that when you put an email address in and hit ‘submit’ the confirmation message doesn’t come up properly in the large screen…

Cheers in advance
Jim

[Rue NelModerator]

Hello Jim,

@lely‘s code is intended for the homepage only. If you want to apply it to other pages, please have the code updated and make use of this code instead:

body {
    overflow: initial;
}

@media (min-width: 980px){
  .x-subscribe-form input[type="submit"] {
    margin-top: 0;
    height: 52px;
  }

  .x-subscribe-form>fieldset+fieldset {
    width: 30%;
    float: left;
    display: inline-block;
  }

  .x-subscribe-form>fieldset {
    display: inline-block;
    width: 70%;
    float: left;
  }

  .x-subscribe-form {
    max-width: 60% !important;
    width: 100%;
  }
}

Please let us know if this works out for you.

[gymriteParticipant]

Hi, sorry that hasn’t helped. Can you please have a look into why the confirmation message doesn’t come up properly when you press the “notify me of cool stuff” button?

Also, just opened the web page in a browser other than safari and it looked like the attached image…

Cheers
Jim

[gymriteParticipant]

I’ve found a work around using cornerstone to get the same affect, not sure why you guys didn’t suggest this route rather than code….

Anyway, the site page works better now except when its opened with browsers other than safari I get this big white box…. any ideas?

[Rue NelModerator]

Hello There,

When I click on the submit button, I got this:

I am guessing that the issue has been resolved already. To get rid of the big white box, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-container.main:before {
    display: none;
}

Hope this helps. Please let us know how it goes.

[gymriteParticipant]

YES! thats much better, thanks.

Final request, can I make the email entry box the same height as the button below without affecting the ‘Thank you’ message?

I can’t figure out how to target that bit, i’m a CSS newb…

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    height: 2.65em;
}

Hope that helps.

[Author]

Posts