|
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
|
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
|
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.
|
