CSS for Button on Multi Level Donation

  • Resolved jdockins1287

    (@jdockins1287)


    6 years, 11 months ago

    Placing a form in the footer of a webpage; have the following:

    $25 $50 $75 $100
    DONATE NOW (button)

    Want:

    $25 $50 $75 $100 DONATE NOW (button)

    Can’t seem to find the correct div/class to move the donate button to be inline with the donation amounts. Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • gsamsmith

    (@gsamsmith)

    6 years, 11 months ago

    Hi there,

    If you float the <ul> list of donation levels left it will bring the “Donate Now” button up to the right. Then you will only need to add a little margin to the modal button to get everything lined up.

    Here’s the CSS I would use to make this happen:

    #give-donation-level-button-wrap {
	float: left;
}

.give-btn-modal {
	margin-top: 6px;
}

    Give that a try and let me know how that works for you.

    Thanks.

    • This reply was modified 6 years, 11 months ago by gsamsmith.
    Thread Starter jdockins1287

    (@jdockins1287)

    6 years, 11 months ago

    Thanks so much for the help! It worked perfectly…apologies but one last change…

    How could I add in the give-donation-amount in between like this:

    $25 $50 $75 $100 [set-price give-donation-amount form-row-wide] DONATE [button]

    Very much appreciate the support

    gsamsmith

    (@gsamsmith)

    6 years, 11 months ago

    Hi there,

    You’re very welcome.

    With the way these elements are laid out on the page, there is no easy way to achieve the new layout you’re after of:

    “$25 $50 $75 $100 [set-price give-donation-amount form-row-wide] DONATE [button]”

    That said there is very little that can’t be achieved through custom development. If this layout is something that’s important to you I recommend seeking out the help of a developer that could help you achieve this.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS for Button on Multi Level Donation’ is closed to new replies.