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; } } }

Widening an NXT Donation Form

Kellie DeMers

We are moving our forms from RE7 to RE NXT and have run into an interesting issue. When our web designer puts the embed code into the website in place of the OLX form, the Donation Form is much narrower than the one we used in OLX. In fact, it is only about ⅔rds the width of the original OLX form. We have fallen back to using our OLX form until we can figure out a solution. Is there something we can do to make the NXT Donation Form wider?

Find more posts tagged with

Comments

Alex Wong

@Kellie DeMers
RE NXT donation form uses the same type of “embed” to bring the donation form's HTML element into the webpage that's hosting the donation form, so they work very similiarly.

As the HTML element itself is brought into the webpage, it is “part” of the webpage, meaning CSS and Javascript manipulation is directly possible without dealing with cross site scripting situation. Have your webdev person work on the embed form more and check the browser developer tool (Inspect element) to find out what the container of the donation form has styled and work on that styling to increase or decrease the width of the container

Lee Grisham

@Kellie DeMers Would be interesting to see what those look like if they are wider. Since you can't style them for different sizes, would that change how things function/look or would it stretch them out?

Alex Wong

@Kellie DeMers
So i took a look at the actual embed code for RE NXT donation form, it seems like even thought he code looks simliar to OLX donation form embed code, the underlying workingness of the code is different.

Meaning, RE NXT Donation Form also uses IFRAME.

The IFRAME is max-width of 600px, so that's where you (your webdev team) can play

8c6cf8eeec2e76963fdf79472cbbe89c-huge-im

You can make max-width 100% to take up full width, or any other pixel value of your choice.

@Lee Grisham and yes, the fields just “streches” out to the width of the IFRAME.