Viewing 4 replies - 1 through 4 (of 4 total)
  • I have inspected the form at the link provided and with the dimension stated in your question. If you can make the width of the email, name and subject fields the same as that of the textarea (message field) the problem would be solved.

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    If you find you need more detailed advice, after reading and working through the above link, please reply to the thread and I will have look. ??

    Thread Starter redizdead1

    (@redizdead1)

    Hi Davmerit,

    Thank you for your great answer, this is the type that really helps learning ! For a noob like me it’s very nice.
    So I checked, and I have some questions left cause I want to be sure to understand well.

    I went and check the css of my theme and it seems it doesn’t set particular width for these fields.

    The thing is my theme is responsive. I succeeded in changing a field to a fixed width, you can check the link again, the email field is now 100px instead of 293px (on my desktop)

    But that technique doesn’t work for responsive themes, does it ?

    Shouldn’t I try with margins instead ? If so, would that be in the CSS file ?
    It seems those fields just lack a higher margin on he right…

    Thanks again

    The code below should help solve your problem on screen 780px to 1200 px

    Inspected the form @ ??https://depannageordinateur.fr/

    correction:
    ??

    .wpcf7-form .wpcf7-text {
       width: 250px;
    } /*on desktop*/  
    
    @media screen and (max-width: 800px){
    .wpcf7-form .wpcf7-text {
       width: 180px;
    }
    } /* @screen 780px to 1200 px */

    add your code via https://www.ads-software.com/plugins/simple-custom-css/??

    Thread Starter redizdead1

    (@redizdead1)

    it doesn’t work well…
    what about the margin ? how would you apply a margin-right to one of the fields?

    PS: I applied your code you can have a look

    EDIT: I changed the “max width” to 1200px and it seems to work… Was I right ?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Problem with widget on the side in responsive’ is closed to new replies.