CSS problem – form fields are different

Resolved kala89
(@kala89)

9 years, 1 month ago
Hi guys,

As topic says, I have a problem with the CSS of the Customizr theme.
I have to build complicated contact form; with many different fields etc.

I’ve got stuck in while styling a part of it. As you can see here (attached screenshot: https://www.dropbox.com/s/cvi5t0ift5l9r1u/Zrzut%20ekranu%202017-02-07%20o%2020.38.10.png?dl=0) text/text area fields and select fields have a different size, even though styling of both (in WP editor) is exactly the same. I’ve found info that I should probably edit theme’s CSS but I can’t see any problems there.

Does anyone can help me? Please! 🙂 Thanks in advance
- This topic was modified 9 years, 1 month ago by kala89.

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

Michael
(@alchymyth)

9 years, 1 month ago

can you provide a live link to the post or page with the form?

a screenshot is not really useful for troublshooting formatting issues.

what plugin are you using for the form?
Thread Starter kala89
(@kala89)

9 years, 1 month ago
Michael, thank you for a fast reply.

Here is the link to the form – http://autoskup24h.pl
I am using Contact Form 7 plugin, I’ve been using it multiple times and hadn’t had any problems before.

EDIT: Oh, and one thing I forgot to tell, I’ve deleted custom CSS formatting for each type of input fields in WP editor, that’s because each time I tried to change something CSS was crashing 🙂 So I left only the part of CSS responsible for the columns/rows.
- This reply was modified 9 years, 1 month ago by kala89.
Michael
(@alchymyth)

9 years, 1 month ago
an adjustment of the column CSS plus some formatting for the form input, select, and textarea might work; try:
```
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 48%; padding:0; margin: auto 1%;
	}
	.column-forth{
		width: 23%; padding:0; margin: auto 1%;
	}
}

.wpcf7 input, .wpcf7 select { width: 100%; padding-left: 0; padding-right: 0; height: 32px;
  line-height: 32px; box-sizing: border-box; }
.wpcf7 textarea { width: 100%; padding-left: 0; padding-right: 0; box-sizing: border-box; }
```
Thread Starter kala89
(@kala89)

9 years, 1 month ago

Michael,

Thank you very much for help! it works perfectly as it should.
It’d took me ages to write proper code and you’ve done it in a few sec. BIG thank you again!

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

The topic ‘CSS problem – form fields are different’ is closed to new replies.

Tags