Gravity Forms CSS Flex Layouts gravity forms flex 862x454

Gravity Forms CSS Flex Layouts

Glenn Uncategorized Leave a Comment

Simply add the following CSS to make your Gravity Forms Flex using CSS Flex Layouts (CSS Flexbox)


/* Gravity Forms Flex */

body .gform_wrapper .gform_fields {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  list-style-type: none;
}

.gfield {
  width: 100%;
}

body .gform_wrapper .top_label li.gfield.gf_left_half {
  width: 50%;
  margin-right: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
}

body .gform_wrapper .top_label li.gfield.gf_right_half {
  width: 50%;
  margin-right: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
}

body .gform_wrapper .top_label li.gfield.gf_left_third {
  width: 33.33333333%;
  margin-right: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
}

body .gform_wrapper .top_label li.gfield.gf_middle_third {
  width: 33.33333333%;
  margin-right: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
}

body .gform_wrapper .top_label li.gfield.gf_middle_third input.medium.datepicker {
  width: calc(100% - 21px)!important;
}

body .gform_wrapper .top_label li.gfield.gf_right_third {
  width: 33.33333333%;
  margin-right: 0px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
}

/* Gravity Forms Flex Responsive */

@media (max-width: 479px) {
  body .gform_wrapper .top_label li.gfield.gf_left_half {
    width: 100%;
  }
  body .gform_wrapper .top_label li.gfield.gf_right_half {
    width: 100%;
  }
  body .gform_wrapper .top_label li.gfield.gf_left_third {
    width: 100%;
  }
  body .gform_wrapper .top_label li.gfield.gf_middle_third {
    width: 100%;
  }
  body .gform_wrapper .top_label li.gfield.gf_right_third {
    width: 100%;
  }
}

This will give your Gravity forms a fluid and responsive layout that covers the Gravity Forms prebuilt CSS Classes half and third classes for fluid double and triple columns. See it working on our own site’s Contact Page

If you don’t know Gravity Forms then simply put it is the Best WordPress Form Plugin.

About the Author
Gravity Forms CSS Flex Layouts 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.