[Santiago GParticipant]

Hi there ! I am using the integrity stack and find the contact and comment input fields too big. How can I customize the size of the input fields and make them smaller ?
Thanks a lot !

[ChristianModerator]

Hey Santiago,

For the height, please add the CSS code below in the Customizer > Custom > CSS.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
height: 2.3em;
}

Adjust the 2.3 as per your needs.

For the width, it is set to span 100% the width of its container so you just need to edit your container width or column to reduce the width.

Hope that helps. 🙂

[Santiago GParticipant]

Hi, thanks a lot for the help. It did work in the contact form but not in the posts comment’s form. That one is still big. I cannot change the width of the comment’s form because that’s in the post’s layout and not designed by me like any other page where I am able to play with the columns and different sizes. How could I change the comment’s input size and width ?
Thanks !

[AlexanderKeymaster]

Hi there,

Can you give us a link to a page on your site? This way we can double check it for you.

[Santiago GParticipant]

This reply has been marked as private.

[AmanMember]

Hi there,

Please replace this:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
height: 2.3em;
}

with this:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
height: 2.3em;
font-size:13px;
line-height: 2em;
}

[Santiago GParticipant]

This reply has been marked as private.

[AmanMember]

Hi there,

For both the issues, please add the following CSS:

.comment-form-comment textarea{
height:100px; 
}

@media (max-width: 979px){
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
width:100%;
}
}

Let me know if you face any issues.

Thanks!

[Santiago GParticipant]

Great ! I had to change some things around but made it work. Your code gave me more clues. Thanks a lot for all your help and sorry again for being a pain ! 😉

[ChristianModerator]

You’re welcome Santiago.

[Author]

Posts