Move Additional Content Above Age Consent Button

Hi @slegrand18,

You can, but it’s not the prettiest solution at the moment. It will be easier when the next major version is out.

Until then though, we need to get a bit creative with some CSS and flex as it allows us to reorder elements.

Essentially we set the window to be flex, then set everything to 100% so it wraps (can’t use flex column as it stacks the buttons).

Then we set all the things order property and Additional Content should be above the buttons:

.age-gate-form {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.age-gate-heading,
.age-gate-subheading,
.age-gate-challenge,
.age-gate-error,
.age-gate-remember-wrapper,
.age-gate-additional-information {
  flex: 0 0 100%;
  max-width: 100%;
}

.age-gate-heading,
.age-gate-subheading,
.age-gate-challenge,
.age-gate-error {
  order: 0;
}

.age-gate-additional-information {
  order: 1;
}

.age-gate-remember-wrapper,
.age-gate-submit-yes,
.age-gate-submit-no {
  order: 2;
}

Hope that helps

Cheers
Phil