nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

responsive donation form label

Gwendolyn Chambers

We are using a donation form with level labels and we'd like to use the responsive form. Does anyone know what the CSS modification would be to make the label not be a button? Our responsive wrappers are based on Blackbaud's responsive donation form kit.

b3092399ab930d70a476ffb25f5eb7d0-huge-im

Find more posts tagged with

LuminateOnline

Comments

Philip Nawrocki

@Gwendolyn Chambers Can you send a link to the page so we can inspect the code?

Thanks,

Phil

Gwendolyn Chambers

@Philip Nawrocki
Hi Philip,
Here is the un-responsive page that we are currently using. And here is a test page that has the responsive form setting switched on. Thanks for taking a look.

Philip Nawrocki

@Gwendolyn Chambers I don't think the test page is published. I keep getting to this page:
test page

Can you publish it?

Thanks,

Phil

Gwendolyn Chambers

@Philip Nawrocki
Sorry about that. It's published now:

Jeremy Reynolds

@Gwendolyn Chambers
Try this:

body.mobile div.responsive div.donation-level-label-container {
margin: inherit;
}

body div.donation-level-amount-container,
body div.donation-level-label-container {
background: none;
padding: initial;
color: inherit;
border-radius: 0;
border: 0 none;
min-width: auto;
text-align: inherit;
}

body div.donation-level-amount-container.donation-level-selected,
body div.donation-level-label-container.donation-level-selected {
background: none;
}

body.mobile div.responsive input[type="radio"] {
position: initial;
left: 0;
}