CSS not working

  • Resolved AJ Don

    (@cultural-keys)


    7 years, 2 months ago

    Hey guys.

    So I have both your C7 plugins installed and active. But no matter what I do, the form isn’t responding to some changes I make to the css. The form is at the bottom of my website here;

    http://rainasagency.ajstestingsite.com/

    I’m trying to make the Name, Email and Subject boxes 50%, and then the Message box 85% But it’s not changing. I tried various css for an hour, trying to get the 50%, then gave up.

    The css I’m using is;

    /* Contact Form 7 Styles
---------------------------------*/
 
.wpcf7 {
 
background-color: #F0F0F0;
 
border: 5px solid #666666;

width: 60%;

}

.wpcf7-form {
 
margin-left: 25px;
 
margin-right: 25px;
 
margin-top: 25px;

.wpcf7-textarea {
 
width: 85%;
 
}

.wpcf7 input {
 
width: 50%;
 
}

    I found it on another website with directions to pimp a C7 form.

    The other thing I’m trying to do is get the contact form in the centre of the page. But again, it doesn’t seem to work.

    Anyhow, any suggestions would be very welcome!

    AJ

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Lehel Szilard Marosi

    (@mlehelsz)

    7 years, 2 months ago

    Greetings Cultural Keys,

    We have looked at your CF7 form and found out, that you have all your inputs and textareas in paragraphs.

    In order to change the width of those elements, you could add the CSS snippet from above to our CSS editor, which looks like this: https://s.w.org/plugins/contact-form-7-style/screenshot-6.jpg?r=1585551

    Or try adding a custom style to your form. Try playing around with the settings, it has properties with “%” too.

    Best regards,
    Lehel

    Thread Starter AJ Don

    (@cultural-keys)

    7 years, 2 months ago

    Hi there,

    Thanks for the fast reply. I did as your suggested, both using the CF7 Special CSS section, and trying different settings %, but nothing about the form has changed. It looks exactly the same.

    I cleared both site cache and browser cache, but no changes.

    Is there something else i can try to get this working?

    Sincere gratitude,

    AJ

    Plugin Author Lehel Szilard Marosi

    (@mlehelsz)

    7 years, 2 months ago

    Hey there,

    Have you tried adding “!important” to the end of each property?
    As I see, you a small mistake in your CSS, maybe that is the problem of the incorrect rendering.
    Please try to add the following snippet (which is only the corrected of the bad one):

    
.wpcf7 {
    background-color: #F0F0F0 !important;
    border: 5px solid #666 !important;
    width: 60% !important;
}
.wpcf7-form {
    margin: 25px 25px 0 !important;
}
.wpcf7-text {
    width:85% !important;
}

    If you enjoy our work, please feel free to give us a five star rating or consider donating.

    Regards,
    Lehel

    Thread Starter AJ Don

    (@cultural-keys)

    7 years, 2 months ago

    Hey Lehel,

    Thanks for your continued suggestions. Unfortanetly, the form is still not chnaging in any way.

    The code I’m usisng is as you suggested:

    /* Contact Form 7 Styles
---------------------------------*/
 
.wpcf7 {
    background-color: #F0F0F0 !important;
    border: 5px solid #666 !important;
    width: 60% !important;

}

}
.wpcf7-form {
    margin: 25px 25px 0 !important;
 
margin-left: 25px;
 
margin-right: 25px;
 
margin-top: 25px;

.wpcf7-text {
    width:85% !important;
}

.wpcf7 input {
 
width: 50%;
 
}

    So I’m not sure why it’;s still not having any effect with what it appears on teh website.

    Does anything still stand out to you as being wrong?

    Thanks in advance,

    AJ

    Plugin Author Lehel Szilard Marosi

    (@mlehelsz)

    7 years, 2 months ago

    Hey AJ,

    The CSS snippet you provided is incorrect.
    Please be careful about opening and closing the parenthesizes in the right spot.

    Please look at this screenshot, where I try to mark the problem: https://www.screencast.com/t/Ouvsu5fw6Byq

    This means everything from that point in that CSS rule base is ignored.

    Regards,
    Lehel

    Thread Starter AJ Don

    (@cultural-keys)

    7 years, 2 months ago

    Thanks! That changed the input box sizes. But only to the figures above, if I changed the % to anything else, there was no change. Strange. 🙁

    In the same way though, I now just need to centre the box. I tried using

    .wpcf7 { text-align: center; } !important;

    At the top of the CSS, but again, it has no effect. I realise I should probably go and learn CSS, but in the short term, am I just putting this line in the wrong place again?

    Plugin Author Johnny

    (@ionuticlanzan)

    7 years, 2 months ago

    Hey AJ,

    please try in this way

    .wpcf7 { text-align: center !important; }

    Your CSS syntax doesn’t look correct in that way. 🙂

    If you enjoy our work, please feel free to give us a five star rating or consider donating.

    Best,
    Johnny

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS not working’ is closed to new replies.

Tags