A Collection of Helpful Custom CSS Queries

A general repository for Custom CSS queries.

Change the Text Content of Recurring Options

.GF-RecurringOptions__button{
	font-size:0pt;
}

.GF-RecurringOptions__button:nth-child(1):before{
	font-size:12pt;
	content:"custom text one";
}

.GF-RecurringOptions__button:nth-child(2):before{
	font-size:12pt;
	content:"custom text two";
}

Hide the Giving Form Header

.GF-Header{
    display:none;
}

Adjust the Recaptcha Badge for Mobile Screens

Solves the issue that causes the footer to be obscured by the Recaptcha badge.

@media (max-width: 400px) {
    .grecaptcha-badge{
        opacity:50%;
    }
}

Adjust the Size of the Giving Form Header Text

/*main header*/
.GF-Header__title{
    font-size:36pt;
}

/*header subtiitle*/
.GF-Header__subtitle{
    font-weight:900;
}

Remove White Corners on Giving Form

body{
	background-color:rgba(0,0,0,0);
}

Only Offer Custom Gift Amount

.GF-GiftOptions__button{
    display:none;
}/*remove gift buttons*/

.css-j9q98w{
  display:block;
}/*set button container from flex to block*/

.css-1s50f5r{
  max-width:100%;
}/*adjust default max-width*/

@media (min-width: 900px)
.css-1s50f5r {
  max-width:100%;
}/*adjust variable max-width*/

@media (min-width: 600px)
.css-1s50f5r {
  max-width:100%;
}/*adjust variable max-width*/

Please note that the class names other than ".GF-GiftOptions__button" may differ on other Giving Forms.  The process is to set the button container from flex to block, then adjust the max-width of the Other Amount interface, in this case, ".css-1s50f5r".

Only Offer Custom Gift Amount (Method 2)

.GF-GiftOptions__button-container > div > div:nth-child(1){
  display:none;
}

#GF-GiftOptions > div > div{
  display:grid;
  grid-template-columns:1fr;
}

.css-j9q98w > .MuiGrid-item{
  padding-left:0px;
  max-width:100%;
  margin-left:12px;
}

This accomplishes the same objective as the above section, only with less code.  This code assumes that your Giving Form only has one "regular" gift amount option.

Change the Order of Giving Form Input Fields

In this code example, we change the position of the Postal Code field to occur before City and State.

#GF-BillingInfo > div > div.MuiGrid-root.MuiGrid-container.MuiGrid-item.MuiGrid-grid-xs-12.css-19h0ry{
  /*first and last*/
   order:1;
}

#GF-BillingInfo > div > div:nth-child(4){
    /*email*/
    order:2;
}

#GF-BillingInfo > div > div:nth-child(5){
    /*phone*/
    order:3;
}

#GF-BillingInfo > div > div.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-12.GF__GridInputWrapper.GF-BillingInfo__select--container.css-15j76c0{
    /*country*/
    order:4;
}

#GF-BillingInfo > div > div:nth-child(7){
    /*address 1*/
    order:5;
}

#GF-BillingInfo > div > div:nth-child(8){
    /*address 2*/
    order:6;
}

#GF-BillingInfo > div > div:nth-child(9){
    /*city*/
    order:8;
}

#GF-BillingInfo > div > div.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-12.MuiGrid-grid-sm-3.GF__GridInputWrapper.GF-BillingInfo__select--container.css-f9p5hp{
    /*state*/
    order:9;
}

#GF-BillingInfo > div > div:nth-child(11){
    /*zip*/
    order:7;
}