• I am attempting to fix my CSS for the form but when viewed using CHROME the form I have a number of issues.

    1. The form appears to be left justified
    2. textarea has less width than the cells above it.
    3. the submit button has less width than the textarea and cells above it.

    I was using ChatGPT for the entire day to help me get the CSS working. It could not solve this issue.

    Any help from you would be great.

    Here is my CSS code.

    span.wpcf7-form-control-wrap {
    position: initial !important; /* this will disable position: relative */
    }

    /* Universal reset for form elements */
    form, input, textarea, button {
    width: 100%;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    }

    /* Form container styles */
    .form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    max-width: 500px;
    padding: 0;
    margin: 0 auto;
    flex-direction: column;
    }

    /* Input, Textarea, and Submit Button Styling */
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea,
    .wpcf7 input[type="submit"] {
    width: 100% !important;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    display: block;
    box-sizing: border-box;
    }

    /* Wrapper for textarea */
    .wpcf7-form-control-wrap {
    width: 100% !important;
    display: block;
    }

    /* Textarea styling */
    .wpcf7 textarea {
    height: auto !important;
    resize: vertical;
    }

    /* Submit button styling */
    .wpcf7 input[type="submit"] {
    background-color: #50628b;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    padding: 15px;
    width: 100% !important;
    text-align: center;
    }

    /* Mobile-specific adjustments */
    @media (max-width: 500px) {
    .form-container {
    padding: 10px !important;
    }

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea,
    .wpcf7 input[type="submit"] {
    font-size: 16px;
    padding: 15px;
    }
    }

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter spineless

    (@spineless)

    Oh. sorry. The website is

    https://www.vekuvek.com

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    See Styling contact form

    Don’t forget to clear cache after adding style rules.

    Thread Starter spineless

    (@spineless)

    I have lots of CSS to style the form. Here you go. That is not the issue. The issue is it does not line up properly for Chrome.

    span.wpcf7-form-control-wrap {
    position: initial !important; /* this will disable position: relative */
    }

    /* Universal reset for form elements */
    form, input, textarea, button {
    width: 100%;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    }

    /* Form container styles */
    .form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    max-width: 500px;
    padding: 0;
    margin: 0 auto;
    flex-direction: column;
    }

    /* Input, Textarea, and Submit Button Styling */
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea,
    .wpcf7 input[type="submit"] {
    width: 100% !important;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    display: block;
    box-sizing: border-box;
    }

    /* Wrapper for textarea */
    .wpcf7-form-control-wrap {
    width: 100% !important;
    display: block;
    }

    /* Textarea styling */
    .wpcf7 textarea {
    height: auto !important;
    resize: vertical;
    }

    /* Submit button styling */
    .wpcf7 input[type="submit"] {
    background-color: #50628b;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    padding: 15px;
    width: 100% !important;
    text-align: center;
    }

    /* Mobile-specific adjustments */
    @media (max-width: 500px) {
    .form-container {
    padding: 10px !important;
    }

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea,
    .wpcf7 input[type="submit"] {
    font-size: 16px;
    padding: 15px;
    }
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.