input fields width in contact forms

Home › Forums › Jevelin Theme › input fields width in contact forms

Home › Forums › Jevelin Theme › input fields width in contact forms

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    RESOLVED Posts

  • anja_hf
    Participant

    Hi Shufflehound Team,

     

    I’ve been struggling to have contact form 7 fields expanding to the entire available width of a column. They seemed to be stuck, keeping the width defined by the data input size.

    I somehow managed to get the result I wanted, using the following custom  CSS code:

    .wpcf7 div, 
.wpcf7 span, 
.wpcf7 form, 
.wpcf7 p, 
.wpcf7 label
{ width: 100%; }

    The result can be seen here, at the bottom of the page:

    http://www2.anja-foerster.com/de/home-de/

    Without the above CSS code, all form fields shrink to half the width, although the containing column is much wider.

     

    I’m just concerned, that the solution I found is pretty cumbersome and might not be very stable… would there be a better, cleaner way to do it?

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    Hi @anja_hf,

     

    I hope you are well today and thank you for your question.

     

    You can use below CSS solution to achieve the same.

     

    .wpcf7 label {
    display: inline;
}

     

    Best regards,
    Shufflehound team

    anja_hf
    Participant

    Nice one, thanks!

    Much more elegant than my tweak 🙂

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form