Contact form text fields adjusted to mobile screen

Sydney
#1

Hello everyone,

I’ve change the width of the field in Contact Form 7 section, because at first they were super narrow. On desktop they look fine, but on mobile they are leaving the edges of the screen. I would like to adjust them on mobile. How to make it happen?

Here is the link to the website: http://www.threelines.pl

Here are the additional CSS I’ve already added by myself: https://pastebin.com/9YHxHye4

Thanks!

#2

Hello there,

To make the form fields wider and fill the entire column container, you shouldn’t define a fixed with with this CSS:


width: 252%;

which will produce responsive issue. You should use this one:


.wpcf7-form label {
  display: block;
}

Regards,
Kharis

#3

Ok I get it, but unfortunately it affects only the last text field (message text-field), the other three are narrow again. Additionally in mobile version text fields are still leaving the left edge of the screen (right edge is fixed). So its still unsolved :frowning:

My other question: is it possible to make name+surname-field and email-field in one row (the row which would be the same width as title, and message fields) So it would be like this: https://ibb.co/cWgTYF

Thanks in advance!

#4

Please try adding this extra CSS code:


.wpcf7-form label input {
  width: 100% !important;    
}   

@media only screen and (max-width:991px) {
    #text-2 {
        margin-left: 0;
    }
}

Regards,
Kharis

#5

Hi Kharis,

Ok, so it helped out with fields weight - now they are all fine. Unfortunately they still leave the edge on mobile as you can see on the picture below:

Here is my actual Additional CSS code:
https://pastebin.com/iDnM7873

Thanks for your efforts!

#6

Hello there,

Replace this code block:


@media only screen and (max-width:991px) {
    #text-2 {
        margin-left: 0;
    }
}

with:


@media only screen and (max-width:991px) {
    #text-2 {
        margin-left: 0 !important;
    }
}

Let me know how it goes.

Regards,
Kharis

#7

Now it looks awesome. Thanks a lot, you can mark this topic as solved :slight_smile:

#8

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis