[Support request] Horizontal contact form 7 responsive issue

[Nave]

Hello guys,

I’m trying to implement contact form 7 horizontaly but for some reason it’s not responsive.
I use generate blocks + generate press and also Ive added this custom css to help do the job:
/* CSS for contact form 7 */

.whole-form {
display: flex;
}
.field-space {
padding-right: 10px;
}
.submit-button {
padding: 25px 10px;
}

@media only screen and (max-width: 600px) {
.whole-form {
flex-direction: column;
}
.submit-button {
padding: 15px 0px;
}
.field-space {
margin: 10px 0px;
}
}

would love some help thanks!

[Nave]

main issue is that contact form wont shrink when the screen is getting smaller.

[Fernando]

Hi Nave,

To clarify, by shrinking, are you referring to making the fields smaller in size or for just to align them in one column?

If you’re wanting to align them in one column at max-width of 600px and have it wrap on bigger screens, I altered your code a bit:

.whole-form {
    display: flex;
    flex-wrap: wrap;
}

.field-space {
    padding-right: 10px;
}

.submit-button {
    padding: 25px 10px;
}

@media (max-width: 600px) {
    .whole-form {
        flex-direction: column;
    }

    .submit-button {
        padding: 15px 0px;
    }

    .field-space {
        margin: 10px 0px;
    }
}

The default mobile menu breakpoint is 768 px though.

Kindly let us know.

[Author]

Posts