Make Contact Form 7 responsive

Resolved datapathio
(@datapathio)

9 years, 1 month ago

Hi,

I’m using Contact Form 7 for my formulars but on some mobile devies (like iphone 5) it is not fully visible. How can I fix that issue? I know there are many topics on that in the forum but no resolution has helped me yet.

Thanks for your answers!

Viewing 11 replies - 1 through 11 (of 11 total)

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago

Please provide a link to a page on your site where we can see this. Thanks.

Thread Starter datapathio
(@datapathio)

9 years, 1 month ago

@sterndata it is for example on this page https://datapath.io/resources/whitepapers/devops-network-optimization-ebook/ when you look at it with an iphone 5.
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago
```
#wpcf7-f1699-p1698-o1 {
    width: 90%;
    margin: 0 auto;
}
```
To add CSS:
- If you are using WordPress 4.7, use the “Additional CSS” option in the customizer.
- If your theme has a custom CSS option, use that to add the CSS shown above.
- If not, install the plugin Simple Custom CSS.
Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.
Thread Starter datapathio
(@datapathio)

9 years, 1 month ago

@sterndata it doesnt work :/ is there anything I have to consider when adding the CSS?

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago

How did you add the CSS?

Thread Starter datapathio
(@datapathio)

9 years, 1 month ago

I added it in the appearance css stylesheet editor.

Thread Starter datapathio
(@datapathio)

9 years, 1 month ago

But what I also wanted to ask , in case the css code will work. is there a way to modify the code so that all contact forms 7 at once on my wordpress pages are optimized?
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago
1. Use the Custom CSS link in the customizer to add the CSS.

2. for all forms
```
div.wpcf7 {
 width: 90%;
 margin 0: auto;
}
```
Thread Starter datapathio
(@datapathio)

9 years, 1 month ago

It is still not working, I don’t know why. But thanks for the help!

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

9 years, 1 month ago

disable your caching and optimization plugins when you’re modifying CSS.

Thread Starter datapathio
(@datapathio)

9 years, 1 month ago

Now it is working, thanks 🙂

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Make Contact Form 7 responsive’ is closed to new replies.

Make Contact Form 7 responsive

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics