Title: CSS Full Width Responsive Form
Last modified: August 17, 2021

---

# CSS Full Width Responsive Form

 *  Resolved [yanike](https://wordpress.org/support/users/yanike/)
 * (@yanike)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/css-full-width-responsive-form-multi-columns/)
 * Here’s the CSS for making your forms full width responsive.
 * [@plugincreator](https://wordpress.org/support/users/plugincreator/), I think
   the structure needs to be redone to be following:
    cf7b-section – cf7b-row — 
   cf7b-col
 *     ```
       .cf7b-section {
       	display: flex;
         flex-direction: column;
       	align-content: stretch;
       	width: 100%;
       	flex-wrap: nowrap;
       }
   
       .cf7b-col {
       	display: flex;
         flex-wrap: wrap;
         padding: 0 4px;
       }
   
       .cf7b-row {
       	flex: auto;
         padding: 0 4px;
       }
   
       @media screen and (max-width: 767px) {
         .cf7b-row  {
           flex: 100%;
           max-width: 100%;
         }
       }
       ```
   
    -  This topic was modified 4 years, 9 months ago by [yanike](https://wordpress.org/support/users/yanike/).
    -  This topic was modified 4 years, 9 months ago by [yanike](https://wordpress.org/support/users/yanike/).
    -  This topic was modified 4 years, 9 months ago by [yanike](https://wordpress.org/support/users/yanike/).

The topic ‘CSS Full Width Responsive Form’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/cf7-builder_deebee.svg)
 * [Builder for Contact Form 7 by Webconstruct - Drag & Drop Contact Form Builder](https://wordpress.org/plugins/cf7-builder/)
 * [Support Threads](https://wordpress.org/support/plugin/cf7-builder/)
 * [Active Topics](https://wordpress.org/support/plugin/cf7-builder/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cf7-builder/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cf7-builder/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [form](https://wordpress.org/support/topic-tag/form/)
 * [full-width](https://wordpress.org/support/topic-tag/full-width/)
 * [fullwidth](https://wordpress.org/support/topic-tag/fullwidth/)

 * 2 replies
 * 4 participants
 * Last reply from: [yanike](https://wordpress.org/support/users/yanike/)
 * Last activity: [4 years, 9 months ago](https://wordpress.org/support/topic/css-full-width-responsive-form-multi-columns/)
 * Status: resolved