Support

Home Forums Event Espresso Premium rearrange registration page layout

rearrange registration page layout

Posted: November 27, 2018 at 11:23 am


Jeffrey

November 27, 2018 at 11:23 am

Can you look at the following? https://monosnap.com/file/xVM28zH7NL87FIegPvmif134N8k3a8

It’s the registration page and as shown I would like both promotion code to be right justified, and to have the payment option first and promotion code second. The main purpose of this page is to choose a payment option and people who do not have a code are seeing the code box first and looking for their code, which they don’t have. We do occasionally use a code, but we’d rather the focus be on the payment option.

Thanks,
MD


Josh

  • Support Staff

November 27, 2018 at 11:58 am

Hi,

You can add the following CSS:

#ee-spco-payment_options-reg-step-form {
display: flex;
flex-flow: row wrap;
}
#ee-spco-payment_options-reg-step-form > * {
  flex: 1 100%;
}
#methods-of-payment div {
  text-align: right;
}
#ee-available-payment-method-inputs {
  display: flex;
  justify-content: flex-end;
}
#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options {
  order: 2;
}

Which will rearrange things, and actually put the promo code field at the bottom past the other buttons to avoid breaking up the flow.

Custom CSS can usually be added to the site’s Appearance > Customize > Additional CSS panel.


Jeffrey

November 29, 2018 at 7:31 am

Thanks! However we’d like the promotion code box to be 2nd to last. If they have a code we don’t want them to miss the opportunity to insert it. While you’re at it, can you make the promotion code box the same width as the payment options section instead of having it go full width?

Thanks,
MD


Josh

  • Support Staff

November 29, 2018 at 8:40 am

Hi,

You’ll add this to move the other button to the bottom:

#ee-spco-payment_options-reg-step-form #spco-payment_options-whats-next-buttons-dv {
  order: 3;
}

With regards to making the promotions code box the same width, since I do not exactly know how wide your site’s payment options section is, I can point you in this direction:

Change this:

#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options {
  order: 2;
}

to this:

#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options {
  order: 2;
  margin-left: 20%;
}

Then, adjust the percentage accordingly to get the desired width. More margin will make the box smaller.

You must be logged in to reply to this support post. Sign In or Register for an Account

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: publish

Updated by  Josh 1 week, 6 days ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!