CF7 Width Responsive Issue

  • Resolved bigfootwebdev

    (@bigfootwebdev)


    4 years, 10 months ago

    Hi,

    In the last couple days, all of a sudden the width of selected CF7 boxes are no longer responsive (i.e. 100%). They are short.
    I have used the Chrome Inspect function to help me out in finding what could be a cause of the issue.
    I have updated, in the Additional CSS section, and put the following. This didn’t help.
    At first I put this:
    .wpcf7 {width:100% !important;}
    That didn’t work. Then I put this:
    .wpcf7-form {width:100% !important;}
    Also didn’t work. Then I put the below.

    .wpcf7-form input[type=”text”], input[type=”email”], input[type=”url”], input[type=”number”], input[type=”tel”], input[type=”range”], input[type=”date”], input[type=”month”], input[type=”week”], input[type=”time”], input[type=”datetime”], input[type=”datetime-local”], input[type=”color”], select, textarea {width:100% !important;}

    I have gone to the theme editor and added the below in each @media section. This didn’t help either.
    .wpcf7-form.cf7-style {
    width: 100%!important;
    }

    I am unsure what I have done to cause this. There is nothing in Elementor style tab that isn’t default. I haven’t added padding, etc…
    This is maybe only in the last few days.

    Prominent on the Home, Subscription, Gift Voucher pages. Not an issue on the Order Forms pages for some reasons.

    Any help will be appreciated.
    Any questions let me know.

    Thank you for your time.

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

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

    (@takayukister)

    label {
 display:inline-block;
 margin-bottom:.5rem
}

    This display:inline-block property makes the “100%” short.

    Thread Starter bigfootwebdev

    (@bigfootwebdev)

    Hi Takayki,

    Thanks for replying.

    I see what you mean.

    I had them like this:
    <label> Your Email *
    [email* your-email] </label>

    When hey were meant to be like this.
    <label> Your Email * </label>
    [email* your-email]

    Don’t know why I did that.
    Thanks for the reply and help.
    I will change this topic to resolved.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CF7 Width Responsive Issue’ is closed to new replies.