How do I make Quform responsive?

Quform WordPressFAQStyling & layoutHow do I make Quform responsive?

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

Quform is not yet responsive with responsive settings, however the next major version will be. For now you can easily create your own responsive styles and apply it to Quform.

I have made the basic styles available below, all you need to do it copy the CSS code below and paste it into a custom.css file. Information on how to set up a custom.css file can be found here (Method 2).

Each media query has a comment above so you know which device screen size it will effect. All the styles within these sections will add the styles to the relevant elements when the width equals the set size(s).

Here is the basic responsive styles to get you started, please note this is just Beta code and we are working on a fuller version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
    /* Add border-box so padding does not cause overflow */
    .iphorm-outer, .iphorm-outer *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    /* Groups columns become stacked */
    .iphorm-group-row > .iphorm-element-wrap, .iphorm-group-row > .iphorm-group-wrap {
        float: none;
        width: 100% !important;
        display: block;
    }
    /* Elements become full width */
    .iphorm-elements .iphorm-element-wrap-text input, .iphorm-elements .iphorm-element-wrap-captcha input, .iphorm-elements .iphorm-element-wrap-password input, .iphorm-elements .iphorm-element-wrap select, .iphorm-elements .iphorm-element-wrap textarea {
        width: 100%;
        min-width: 100px;
    }
    .iphorm-errors > .iphorm-error {
        float: none;
        display: block;
    }
    /* There is no elements to the right so no need for this padding */
    .iphorm-element-spacer {
        padding-right: 0 !important;
    }
}
 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) {
    /* Button is larger for easy clicking on small devices. */
    .iphorm-submit-input-wrap {
        width: 100%;
    }
    .iphorm-submit-wrap button {
        margin: 0; 
        width: 100%;
    }
    .iphorm-submit-wrap button span, .iphorm-submit-wrap button em {
        height: 35px; 
        line-height: 35px;
    }
    /* There is not enough room for left labels - so move them above */
    .iphorm-labels-left > .iphorm-element-spacer > label {
        float: none;
        width: auto;
    }
    .iphorm-labels-left.iphorm-element-wrap .iphorm-input-outer-wrap, .iphorm-labels-left.iphorm-element-wrap .iphorm-input-wrap, .iphorm-labels-left.iphorm-element-wrap .iphorm-captcha-image-wrap {
        margin-left: 0;
        padding-left: 0;
    }
}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
    /* Add border-box so padding does not cause overflow */
    .iphorm-outer, .iphorm-outer *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    /* Groups columns become stacked */
    .iphorm-group-row > .iphorm-element-wrap, .iphorm-group-row > .iphorm-group-wrap {
        float: none;
        width: 100% !important;
        display: block;
    }
    /* Elements become full width */
    .iphorm-elements .iphorm-element-wrap-text input, .iphorm-elements .iphorm-element-wrap-captcha input, .iphorm-elements .iphorm-element-wrap-password input, .iphorm-elements .iphorm-element-wrap select, .iphorm-elements .iphorm-element-wrap textarea {
        width: 100%;
        min-width: 100px;
    }
    .iphorm-errors > .iphorm-error {
        float: none;
        display: block;
    }
    /* There is no elements to the right so no need for this padding */
    .iphorm-element-spacer {
        padding-right: 0 !important;
    }
}
 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) {
    /* Button is larger for easy clicking on small devices. */
    .iphorm-submit-input-wrap {
        width: 100%;
    }
    .iphorm-submit-wrap button {
        margin: 0; 
        width: 100%;
    }
    .iphorm-submit-wrap button span, .iphorm-submit-wrap button em {
        height: 35px; 
        line-height: 35px;
    }
    /* There is not enough room for left labels - so move them above */
    .iphorm-labels-left > .iphorm-element-spacer > label {
        float: none;
        width: auto;
    }
    .iphorm-labels-left.iphorm-element-wrap .iphorm-input-outer-wrap, .iphorm-labels-left.iphorm-element-wrap .iphorm-input-wrap, .iphorm-labels-left.iphorm-element-wrap .iphorm-captcha-image-wrap {
        margin-left: 0;
        padding-left: 0;
    }
}

Updated: 14/9/13

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy