folks, I have a plugin I had someone code for me and its

Hello folks,

I have a plugin I had someone code for me and its not making the form fields on the sign up form in it responsive when viewed on a phone.

I was wondering if one of our css gurus might take a look at the code and tell me if you see any issues with it?

Thanks!
Joseph

/* cws_easy_volunteer_member_form */

.cws_easy_volunteer_member_form * {

    margin: 0;

}

.mce-tinymce.mce-container.mce-panel {float:left;width: 600px!important;}

#left_align p{padding:0!important;}

.cws_easy_volunteer_member_form form, #update p{float:left!important;width:100%!important;padding:8px 0;}

#cws_preview .cws_easy_volunteer_member_form form{width:625px!important;}

#cws_preview .cws_easy_volunteer_address.input{width: 28%!important;}

#cws_preview form .cws_easy_volunteer_state {width: 28%!important;margin-top: 12px;}

#update select{float:left!important;}

#mceu_81 {display: none;}

.cws_easy_volunteer_member_form form {

    margin: 0px 0px 25px 8px;

    padding:0px 14px;

    font-weight: normal;

    background: #fff;

    border: 1px solid #e5e5e5;

    -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;

    box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;

}

.cws_easy_volunteer_member_form form .forgetmenot {

    font-weight: normal;

    float: left;

    margin-bottom: 0;

}

.cws_easy_volunteer_member_form .button-primary {

    float: right;

}

#cws_easy_volunteer_member_form form p {

    margin-bottom: 0;

}

#cws_easy_volunteer_member_form form p.submit {

    padding: 0;

}

.cws_easy_volunteer_member_form label {

    color: #0071BC;

    font-size: 14px;

    width: 100%;

    float: left;

    cursor: text;	

}

.cws_easy_volunteer_member_form form .forgetmenot label {

    font-size: 12px;

    line-height: 19px;

}

.cws_easy_volunteer_member_form h1 a {	

    background-size: 274px 63px;

    background-position: top center;

    background-repeat: no-repeat;

    width: 326px;

    height: 67px;

    text-indent: -9999px;

    outline: none;

    overflow: hidden;

    padding-bottom: 15px;

    display: block;

}

#cws_easy_volunteer_member_form {

    padding:10px;

}

#cws_easy_volunteer_member_form_error,

.cws_easy_volunteer_member_form .message {

    margin: 0 0 16px 8px;

    padding: 12px;

}

.cws_easy_volunteer_member_form #nav,

.cws_easy_volunteer_member_form #backtoblog {

    text-shadow: #fff 0 1px 0;

    margin: 0 0 0 16px;

    padding: 16px 16px 0;

}

#backtoblog {

    padding: 12px 16px 0;

}

.cws_easy_volunteer_member_form form .input,

.cws_easy_volunteer_member_form input[type="text"], .cws_easy_volunteer_member_form select {

    color: #555;

    font-weight: 200;

    line-height: 1;

    width: 360px;

    padding: 3px;

    margin-top: 2px;

    margin-right: 6px;

    margin-bottom: 16px;

    border: 1px solid #29ABE2;

    background:  #F2F2F2;

    color:#000000;

    outline: none;

    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);

    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);

}

.cws_easy_volunteer_member_form input:hover

{background-color: #FFFFFF;}

.cws_easy_volunteer_member_form #pass-strength-result {

    width: 250px;

    font-weight: bold;

    border-style: solid;

    border-width: 1px;

    margin: 12px 0 6px;

    padding: 6px 5px;

    text-align: center;

}

.mobile #cws_easy_volunteer_member_form {

    padding: 20px 0;

}

.mobile #cws_easy_volunteer_member_form form,

.mobile #cws_easy_volunteer_member_form .message,

.mobile #cws_easy_volunteer_member_form_error {

    margin-left: 0;

}

.mobile #cws_easy_volunteer_member_form #nav,

.mobile #cws_easy_volunteer_member_form #backtoblog {

    margin-left: 8px;

}

.mobile #cws_easy_volunteer_member_form h1 a {

    width: auto;

}

body.interim-cws_easy_volunteer_member_form {

    height: auto;

}

.interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form {

    padding: 0;

    margin: 5px auto 20px;

}

.interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form h1 a {

    width: auto;

}

.interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form_error,

.interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form .message {

    margin: 0 0 16px;

}

.interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form form {

    margin: 0;

}

div.cws_easy_volunteer_member_form {font-size: 16px;}

#volunteer_users td, #resultset table {font-size: 17px;}

#volunteer_users td, #resultset td {padding: 10px;margin: 10px;}

.cws_easy_volunteer_member_form input[type=checkbox], input[type=radio], select {width: auto!important;}

#cws_easy_volunteer_send_msg {margin: 0;margin-left:6px;margin-right:6px;}

#left_align{float:left;width:60%;padding:10px;}

#right_align{float:left;width:241px;margin: 24px;}

.headings{font-size: 15px;border: 1px solid #CCC;background: #FFF;padding:10px;}

.alert-danger {background-color: #f2dede;border-color: #ebccd1;color: #a94442;padding: 10px;}

div#resultset {padding: 10px;}

#cws_preview form {padding:15px;}

#cws_preview input[type=radio]{margin-left:5px;margin-right:5px;margin-top: 0;margin-bottom: 0;}

#cws_admin textarea{width:50%;}

.alert-danger {

    background-color: rgb(242, 222, 222);

    border-color: rgb(235, 204, 209);

    color: rgb(169, 68, 66);

}

.alert-warning {

    background-color: rgb(252, 248, 227);

    border-color: rgb(250, 235, 204);

    color: rgb(138, 109, 59);

}

.alert-success {

    background-color: #dff0d8;

    border-color: #dff0d8;

    color: #3c763d;

}

.info, .alert {

    padding: 15px;

    margin-bottom: 20px;

    border: 1px solid rgba(0, 0, 0, 0);

    border-radius: 4px;

    margin: 15px 0;

    width: 50%;

}

.required{color:red;}

.padding-up-5x{padding:5px 0;}

.padding-up-10x{padding:10px 0;}

#cws_preview .display_a_lawn{padding-bottom:6px;}

#cws_preview input[type=checkbox] {margin-top: 10px;}

.info .close {margin-top: -36px;}

.close {float: right;cursor:pointer;font-weight:800;}

.cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{width: 28%!important;}

.cws_easy_volunteer_member_form form .cws_easy_volunteer_state {width: 28%!important;}

#left_align p.custom_msg_text{padding-top: 15px!important;}

#loading{

    width: 100%;

    position: absolute;

    top: 100px;

    left: 100px;

    margin-top:200px;

}

#formtable .pagination ul li.inactive,

#formtable .pagination ul li.inactive:hover{

    background-color:#ededed;

    color:#bababa;

    border:1px solid #bababa;

    cursor: default;

}

#formtable .data ul li{

    list-style: none;

    font-family: verdana;

    margin: 5px 0 5px 0;

    color: #000;

    font-size: 13px;

}

#formtable .pagination{

    width: 800px;

    height: 25px;

}

#formtable .pagination ul li{

    list-style: none;

    float: left;

    border: 1px solid #006699;

    padding: 2px 6px 2px 6px;

    margin: 0 3px 0 3px;

    font-family: arial;

    font-size: 14px;

    color: #006699;

    font-weight: bold;

    background-color: #f2f2f2;

}

#formtable .pagination ul li:hover{

    color: #fff;

    background-color: #006699;

    cursor: pointer;

}

.go_button

{

    background-color:rgb(0, 102, 153);border:1px solid #006699;color:#FFF;padding:8px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;font-weight:bold;

}

.total

{

    float:right;font-family:arial;color:#999;

}

h3.view_head {float: left;padding-right: 10px;}

div#three {float: left;padding: 10px 0;}

div#four {float: left;padding: 10px;}

#resultset hr{float:left;width:100%;}

#resultset input[disabled="disabled"], #resultset textarea[disabled="disabled"] {background: rgb(211, 211, 211);border: 0;}

#resultset input, #resultset textarea{background: #FFF;border: 1px solid #ccc;}

.mce-wordcount,.mce-path-item.mce-last{display:none!important;}

@media screen and (max-width:768px) {
	.cws_easy_volunteer_member_form form{margin:0;}
	.cws_easy_volunteer_member_form form#cws_easy_volunteer_member_form, #update p{width:411px!important;}
	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"]{width:100%;}
	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"],
	.cws_easy_volunteer_member_form select{margin-right:0;}
	.cws_easy_volunteer_member_form form .cws_easy_volunteer_state,
	.cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{width:49%!important;}
	.cws_easy_volunteer_member_form input[type="submit"]{width:100%;}
}
  • Michelle Shull

    Hey there, Joe!

    Wow, your dev really likes the "!important" rule. :wink:

    I see the issue here, and it's right in the beginning. The rules are set so the container is 600px wide, rather than using a more responsive method, here. Let's try this, in your custom CSS file. I'll also need to abuse !important, to overwrite all the times your dev used it.

    .mce-tinymce.mce-container.mce-panel {
    float:left;width: 90%!important;
    }
    
    #cws_preview .cws_easy_volunteer_member_form form{
    width:100%!important;
    }
    
    .cws_easy_volunteer_member_form input[type="text"], .cws_easy_volunteer_member_form select {
    width: 55% !important;
    }

    There's another section we're going to need to tweak, as well, but I'm hoping you're going to be able to tell me a bit about how it's looking on the screen. I'm pretty good at picturing CSS output in my head, but I'm confused by this bit:

    .cws_easy_volunteer_member_form h1 a {
    background-size: 274px 63px;
    background-position: top center;
    background-repeat: no-repeat;
    width: 326px;
    height: 67px;
    text-indent: -9999px;
    outline: none;
    overflow: hidden;
    padding-bottom: 15px;
    display: block;
    }

    I know it's the anchor for a Header 1 element for that form, but I'm confused by both the background repeat (there's no background indicated) and the -9999px text indent. Can you grab me a screenshot of the form so I can see what this looks like live? Thanks!

    We may also need to tweak some other bits here and there with individual elements, margins and paddings, but let's see if the CSS I gave you makes the container itself more responsive.

    Thanks, Joe!

  • Michelle Shull

    Hey there, Joe!

    Got it fixed, this is the CSS you needed to create a responsive container, responsive fields, and to make your search button stick to your search field instead of floating on top of your volunteer form.

    .cws_easy_volunteer_member_form {
      width: 90% !important;
    }
    
    .cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"], .cws_easy_volunteer_member_form select {
    width: auto !important;
    }
    
    #d.input {
    width: 95% !important;
    }
    
    input#searchsubmit {
    position: relative !important;
    }

    I normally avoid "!important" whenever possible, but every line of CSS in that plugin had at least one !important in it, so it was necessary to overwrite the original. I already added this to your custom CSS, so it's good to go.

    Thanks, Joe!

  • jsegal

    Um Michelle, so that or maybe how I implemented it totally messed it up.
    It messed up the admin layout and the volunteer page layout.

    /* cws_easy_volunteer_member_form */
    
     {
      width: 90% !important;
    }
    
    .mce-tinymce.mce-container.mce-panel {float:left;width: 600px!important;}
    
    #left_align p{padding:0!important;}
    
    .cws_easy_volunteer_member_form form, #update p{float:left!important;width:100%!important;padding:8px 0;}
    
    #cws_preview .cws_easy_volunteer_member_form form{width:625px!important;}
    
    #cws_preview .cws_easy_volunteer_address.input{width: 28%!important;}
    
    #cws_preview form .cws_easy_volunteer_state {width: 28%!important;margin-top: 12px;}
    
    #update select{float:left!important;}
    
    #mceu_81 {display: none;}
    
    .cws_easy_volunteer_member_form form {
    
        margin: 0px 0px 25px 8px;
    
        padding:0px 14px;
    
        font-weight: normal;
    
        background: #fff;
    
        border: 1px solid #e5e5e5;
    
        -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;
    
        box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;
    
    }
    
    .cws_easy_volunteer_member_form form .forgetmenot {
    
        font-weight: normal;
    
        float: left;
    
        margin-bottom: 0;
    
    }
    
    .cws_easy_volunteer_member_form .button-primary {
    
        float: right;
    
    }
    
    #cws_easy_volunteer_member_form form p {
    
        margin-bottom: 0;
    
    }
    
    #cws_easy_volunteer_member_form form p.submit {
    
        padding: 0;
    
    }
    
    .cws_easy_volunteer_member_form label {
    
        color: #0071BC;
    
        font-size: 14px;
    
        width: 100%;
    
        float: left;
    
        cursor: text;	
    
    }
    
    .cws_easy_volunteer_member_form form .forgetmenot label {
    
        font-size: 12px;
    
        line-height: 19px;
    
    }
    
    .cws_easy_volunteer_member_form h1 a {	
    
        background-size: 274px 63px;
    
        background-position: top center;
    
        background-repeat: no-repeat;
    
        width: 326px;
    
        height: 67px;
    
        text-indent: -9999px;
    
        outline: none;
    
        overflow: hidden;
    
        padding-bottom: 15px;
    
        display: block;
    
    }
    
    #cws_easy_volunteer_member_form {
    
        padding:10px;
    
    }
    
    #cws_easy_volunteer_member_form_error,
    
    .cws_easy_volunteer_member_form .message {
    
        margin: 0 0 16px 8px;
    
        padding: 12px;
    
    }
    
    .cws_easy_volunteer_member_form #nav,
    
    .cws_easy_volunteer_member_form #backtoblog {
    
        text-shadow: #fff 0 1px 0;
    
        margin: 0 0 0 16px;
    
        padding: 16px 16px 0;
    
    }
    
    #backtoblog {
    
        padding: 12px 16px 0;
    
    }
    
    .cws_easy_volunteer_member_form form .input,
    
    .cws_easy_volunteer_member_form input[type="text"], .cws_easy_volunteer_member_form select {
    
        color: #555;
    
        font-weight: 200;
    
        line-height: 1;
    
        width: auto !important;
    
        padding: 3px;
    
        margin-top: 2px;
    
        margin-right: 6px;
    
        margin-bottom: 16px;
    
        border: 1px solid #29ABE2;
    
        background:  #F2F2F2;
    
        color:#000000;
    
        outline: none;
    
        -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    
        box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    
    }
    
    .cws_easy_volunteer_member_form input:hover
    
    {background-color: #FFFFFF;}
    
    .cws_easy_volunteer_member_form #pass-strength-result {
    
        width: 250px;
    
        font-weight: bold;
    
        border-style: solid;
    
        border-width: 1px;
    
        margin: 12px 0 6px;
    
        padding: 6px 5px;
    
        text-align: center;
    
    }
    
    .mobile #cws_easy_volunteer_member_form {
    
        padding: 20px 0;
    
    }
    
    .mobile #cws_easy_volunteer_member_form form,
    
    .mobile #cws_easy_volunteer_member_form .message,
    
    .mobile #cws_easy_volunteer_member_form_error {
    
        margin-left: 0;
    
    }
    
    .mobile #cws_easy_volunteer_member_form #nav,
    
    .mobile #cws_easy_volunteer_member_form #backtoblog {
    
        margin-left: 8px;
    
    }
    
    .mobile #cws_easy_volunteer_member_form h1 a {
    
        width: auto;
    
    }
    
    body.interim-cws_easy_volunteer_member_form {
    
        height: auto;
    
    }
    
    .interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form {
    
        padding: 0;
    
        margin: 5px auto 20px;
    
    }
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form h1 a {
    
        width: auto;
    
    }
    
    .interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form_error,
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form .message {
    
        margin: 0 0 16px;
    
    }
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form form {
    
        margin: 0;
    
    }
    
    div.cws_easy_volunteer_member_form {font-size: 16px;}
    
    #volunteer_users td, #resultset table {font-size: 17px;}
    
    #volunteer_users td, #resultset td {padding: 10px;margin: 10px;}
    
    .cws_easy_volunteer_member_form input[type=checkbox], input[type=radio], select {width: auto!important;}
    
    #cws_easy_volunteer_send_msg {margin: 0;margin-left:6px;margin-right:6px;}
    
    #left_align{float:left;width:60%;padding:10px;}
    
    #right_align{float:left;width:241px;margin: 24px;}
    
    .headings{font-size: 15px;border: 1px solid #CCC;background: #FFF;padding:10px;}
    
    .alert-danger {background-color: #f2dede;border-color: #ebccd1;color: #a94442;padding: 10px;}
    
    div#resultset {padding: 10px;}
    
    #cws_preview form {padding:15px;}
    
    #cws_preview input[type=radio]{margin-left:5px;margin-right:5px;margin-top: 0;margin-bottom: 0;}
    
    #cws_admin textarea{width:50%;}
    
    .alert-danger {
    
        background-color: rgb(242, 222, 222);
    
        border-color: rgb(235, 204, 209);
    
        color: rgb(169, 68, 66);
    
    }
    
    .alert-warning {
    
        background-color: rgb(252, 248, 227);
    
        border-color: rgb(250, 235, 204);
    
        color: rgb(138, 109, 59);
    
    }
    
    .alert-success {
    
        background-color: #dff0d8;
    
        border-color: #dff0d8;
    
        color: #3c763d;
    
    }
    
    .info, .alert {
    
        padding: 15px;
    
        margin-bottom: 20px;
    
        border: 1px solid rgba(0, 0, 0, 0);
    
        border-radius: 4px;
    
        margin: 15px 0;
    
        width: 50%;
    
    }
    
    .required{color:red;}
    
    .padding-up-5x{padding:5px 0;}
    
    .padding-up-10x{padding:10px 0;}
    
    #cws_preview .display_a_lawn{padding-bottom:6px;}
    
    #cws_preview input[type=checkbox] {margin-top: 10px;}
    
    .info .close {margin-top: -36px;}
    
    .close {float: right;cursor:pointer;font-weight:800;}
    
    .cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{width: 28%!important;}
    
    .cws_easy_volunteer_member_form form .cws_easy_volunteer_state {width: 28%!important;}
    
    #left_align p.custom_msg_text{padding-top: 15px!important;}
    
    #loading{
    
        width: 100%;
    
        position: absolute;
    
        top: 100px;
    
        left: 100px;
    
        margin-top:200px;
    
    }
    
    #formtable .pagination ul li.inactive,
    
    #formtable .pagination ul li.inactive:hover{
    
        background-color:#ededed;
    
        color:#bababa;
    
        border:1px solid #bababa;
    
        cursor: default;
    
    }
    
    #formtable .data ul li{
    
        list-style: none;
    
        font-family: verdana;
    
        margin: 5px 0 5px 0;
    
        color: #000;
    
        font-size: 13px;
    
    }
    
    #formtable .pagination{
    
        width: 800px;
    
        height: 25px;
    
    }
    
    #formtable .pagination ul li{
    
        list-style: none;
    
        float: left;
    
        border: 1px solid #006699;
    
        padding: 2px 6px 2px 6px;
    
        margin: 0 3px 0 3px;
    
        font-family: arial;
    
        font-size: 14px;
    
        color: #006699;
    
        font-weight: bold;
    
        background-color: #f2f2f2;
    
    }
    
    #formtable .pagination ul li:hover{
    
        color: #fff;
    
        background-color: #006699;
    
        cursor: pointer;
    
    }
    
    .go_button
    
    {
    
        background-color:rgb(0, 102, 153);border:1px solid #006699;color:#FFF;padding:8px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;font-weight:bold;
    
    }
    
    .total
    
    {
    
        float:right;font-family:arial;color:#999;
    
    }
    
    h3.view_head {float: left;padding-right: 10px;}
    
    div#three {float: left;padding: 10px 0;}
    
    div#four {float: left;padding: 10px;}
    
    #resultset hr{float:left;width:100%;}
    
    #resultset input[disabled="disabled"], #resultset textarea[disabled="disabled"] {background: rgb(211, 211, 211);border: 0;}
    
    #resultset input, #resultset textarea{background: #FFF;border: 1px solid #ccc;}
    
    .mce-wordcount,.mce-path-item.mce-last{display:none!important;}
    
    @media screen and (max-width:768px) {
    	.cws_easy_volunteer_member_form form{margin:0;}
    	.cws_easy_volunteer_member_form form#cws_easy_volunteer_member_form, #update p{width:411px!important;}
    	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"]{width:100%;}
    	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"],
    	.cws_easy_volunteer_member_form select{margin-right:0;}
    	.cws_easy_volunteer_member_form form .cws_easy_volunteer_state,
    	.cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{width:49%!important;}
    	.cws_easy_volunteer_member_form input[type="submit"]{width:100%;}
    }
    
    #d.input {
    width: 95% !important;
    }
    
    input#searchsubmit {
    position: relative !important;
    }
  • Michelle Shull

    Hey there, Joe!

    I see what happened here, I went ahead and put the whole file together here, just copy and paste over your existing css file for the plugin. I cleaned it up a little by dropping parameters and curly braces, so it's a little easier to read. I also zipped it up and attached it, if that's easier.

    If you're curious, the very first line you have under /* cws_easy_volunteer_member_form*/ is starting with a curly brace, rather than a class or ID, and there was no closing curly brace on your last set of definitions for mobile in the original, so that's why anything below it wasn't working properly. This should be what you need.

    /* cws_easy_volunteer_member_form */
    
    .cws_easy_volunteer_member_form * {
    width: 90% !important;
    margin: 0;
    }
    
    .mce-tinymce.mce-container.mce-panel {
    float:left;
    width: auto!important;
    }
    
    #left_align p{
    padding:0!important;
    }
    
    .cws_easy_volunteer_member_form form, #update p{
    float:left!important;
    width:100%!important;
    padding:8px 0;
    }
    
    #cws_preview .cws_easy_volunteer_member_form form{
    width:auto!important;
    }
    
    #cws_preview .cws_easy_volunteer_address.input{
    width: 28%!important;
    }
    
    #cws_preview form .cws_easy_volunteer_state {
    width: 28%!important;
    margin-top: 12px;
    }
    
    #update select{
    float:left!important;
    }
    
    #mceu_81 {
    display: none;
    }
    
    .cws_easy_volunteer_member_form form {
    margin: 0px 0px 25px 8px;
    padding:0px 14px;
    font-weight: normal;
    background: #fff;
    border: 1px solid #e5e5e5;
    -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;
    box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;
    }
    
    .cws_easy_volunteer_member_form form .forgetmenot {
    font-weight: normal;
    float: left;
    margin-bottom: 0;
    }
    
    .cws_easy_volunteer_member_form .button-primary {
    float: right;
    }
    
    #cws_easy_volunteer_member_form form p {
    margin-bottom: 0;
    }
    
    #cws_easy_volunteer_member_form form p.submit {
    padding: 0;
    }
    
    .cws_easy_volunteer_member_form label {
    color: #0071BC;
    font-size: 14px;
    width: 100%;
    float: left;
    cursor: text;
    }
    
    .cws_easy_volunteer_member_form form .forgetmenot label {
    font-size: 12px;
    line-height: 19px;
    }
    
    .cws_easy_volunteer_member_form h1 a {
    background-size: 274px 63px;
    background-position: top center;
    background-repeat: no-repeat;
    width: 326px;
    height: 67px;
    text-indent: -9999px;
    outline: none;
    overflow: hidden;
    padding-bottom: 15px;
    display: block;
    }
    
    #cws_easy_volunteer_member_form {
    padding:10px;
    }
    
    #cws_easy_volunteer_member_form_error,
    
    .cws_easy_volunteer_member_form .message {
    margin: 0 0 16px 8px;
    padding: 12px;
    }
    
    .cws_easy_volunteer_member_form #nav,
    
    .cws_easy_volunteer_member_form #backtoblog {
    text-shadow: #fff 0 1px 0;
    margin: 0 0 0 16px;
    padding: 16px 16px 0;
    }
    
    #backtoblog {
    padding: 12px 16px 0;
    }
    
    .cws_easy_volunteer_member_form form .input,
    
    .cws_easy_volunteer_member_form input[type="text"], .cws_easy_volunteer_member_form select {
    color: #555;
    font-weight: 200;
    line-height: 1;
    width: auto !important;
    padding: 3px;
    margin: 2px 6px 16px 0;
    border: 1px solid #29ABE2;
    background:  #F2F2F2;
    color:#000000;
    outline: none;
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    }
    
    .cws_easy_volunteer_member_form input:hover{
    background-color: #FFFFFF;
    }
    
    .cws_easy_volunteer_member_form #pass-strength-result {
    width: 250px;
    font-weight: bold;
    border-style: solid;
    border-width: 1px;
    margin: 12px 0 6px;
    padding: 6px 5px;
    text-align: center;
    }
    
    .mobile #cws_easy_volunteer_member_form {
    padding: 20px 0;
    }
    
    .mobile #cws_easy_volunteer_member_form form,
    
    .mobile #cws_easy_volunteer_member_form .message,
    
    .mobile #cws_easy_volunteer_member_form_error {
    margin-left: 0;
    }
    
    .mobile #cws_easy_volunteer_member_form #nav,
    
    .mobile #cws_easy_volunteer_member_form #backtoblog {
    margin-left: 8px;
    }
    
    .mobile #cws_easy_volunteer_member_form h1 a {
    width: auto;
    }
    
    body.interim-cws_easy_volunteer_member_form {
    height: auto;
    }
    
    .interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form {
    padding: 0;
    margin: 5px auto 20px;
    }
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form h1 a {
    width: auto;
    }
    
    .interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form_error,
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form .message {
    margin: 0 0 16px;
    }
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form form {
    margin: 0;
    }
    
    div.cws_easy_volunteer_member_form {
    font-size: 16px;
    }
    
    #volunteer_users td, #resultset table {
    font-size: 17px;
    }
    
    #volunteer_users td, #resultset td {
    padding: 10px;
    margin: 10px;
    }
    
    .cws_easy_volunteer_member_form input[type=checkbox], input[type=radio], select {
    width: auto!important;
    }
    
    #cws_easy_volunteer_send_msg {
    margin: 0 6px 0 6px;
    }
    
    #left_align{
    float:left;
    width:60%;
    padding:10px;
    }
    
    #right_align{
    float:left;
    width:241px;
    margin: 24px;
    }
    
    .headings{
    font-size: 15px;
    border: 1px solid #CCC;
    background: #FFF;
    padding:10px;
    }
    
    .alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
    padding: 10px;
    }
    
    div#resultset {
    padding: 10px;
    }
    
    #cws_preview form {
    padding:15px;
    }
    
    #cws_preview input[type=radio]{
    margin:0 5px 0 5px;
    }
    
    #cws_admin textarea{
    width:50%;
    }
    
    .alert-danger {
    background-color: rgb(242, 222, 222);
    border-color: rgb(235, 204, 209);
    color: rgb(169, 68, 66);
    }
    
    .alert-warning {
    background-color: rgb(252, 248, 227);
    border-color: rgb(250, 235, 204);
    color: rgb(138, 109, 59);
    }
    
    .alert-success {
    background-color: #dff0d8;
    border-color: #dff0d8;
    color: #3c763d;
    }
    
    .info, .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    margin: 15px 0;
    width: 50%;
    }
    
    .required{
    color:red;
    }
    
    .padding-up-5x{
    padding:5px 0;
    }
    
    .padding-up-10x{
    adding:10px 0;
    }
    
    #cws_preview .display_a_lawn{
    padding-bottom:6px;
    }
    
    #cws_preview input[type=checkbox] {
    margin-top: 10px;
    }
    
    .info .close {
    margin-top: -36px;
    }
    
    .close {
    float: right;
    cursor:pointer;
    font-weight:800;
    }
    
    .cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{
    width: 28%!important;
    }
    
    .cws_easy_volunteer_member_form form .cws_easy_volunteer_state {
    width: 28%!important;
    }
    
    #left_align p.custom_msg_text{
    padding-top: 15px!important;
    }
    
    #loading{
    width: 100%;
    position: absolute;
    top: 100px;
    left: 100px;
    margin-top:200px;
    }
    
    #formtable .pagination ul li.inactive,
    
    #formtable .pagination ul li.inactive:hover{
    background-color:#ededed;
    color:#bababa;
    border:1px solid #bababa;
    cursor: default;
    }
    
    #formtable .data ul li{
    list-style: none;
    font-family: verdana;
    margin: 5px 0 5px 0;
    color: #000;
    font-size: 13px;
    }
    
    #formtable .pagination{
    width: 800px;
    height: 25px;
    }
    
    #formtable .pagination ul li{
    list-style: none;
    float: left;
    border: 1px solid #006699;
    padding: 2px 6px 2px 6px;
    margin: 0 3px 0 3px;
    font-family: arial;
    font-size: 14px;
    color: #006699;
    font-weight: bold;
    background-color: #f2f2f2;
    }
    
    #formtable .pagination ul li:hover{
    color: #fff;
    background-color: #006699;
    cursor: pointer;
    }
    
    .go_button{
     background-color:rgb(0, 102, 153);
     border:1px solid #006699;
     color:#FFF;
     padding:8px 6px 2px 6px;
     cursor:pointer;
     position:absolute;
     margin-top:-1px;
     font-weight:bold;
    }
    
    .total{
    float:right;font-family:arial;color:#999;
    }
    
    h3.view_head {
    float: left;
    padding-right: 10px;
    }
    
    div#three {
    float: left;
    padding: 10px 0;
    }
    
    div#four {
    float:left;
    padding: 10px;
    }
    
    #resultset hr{
    float:left;
    width:100%;
    }
    
    #resultset input[disabled="disabled"], #resultset textarea[disabled="disabled"] {
    background: rgb(211, 211, 211);
    border: 0;
    }
    
    #resultset input, #resultset textarea{
    background: #FFF;
    border: 1px solid #ccc;
    }
    
    .mce-wordcount,.mce-path-item.mce-last{
    display:none!important;
    }
    
    @media screen and (max-width:768px) {
    	.cws_easy_volunteer_member_form form{margin:0;}
    	.cws_easy_volunteer_member_form form#cws_easy_volunteer_member_form, #update p{width:auto!important;}
    	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"]{width:100%;}
    	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"],
    	.cws_easy_volunteer_member_form select{margin-right:0;}
    	.cws_easy_volunteer_member_form form .cws_easy_volunteer_state,
    	.cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{width:49%!important;}
    	.cws_easy_volunteer_member_form input[type="submit"]{width:100%;}
    	}
    
    #d.input {
    width: 95% !important;
    }
    
    input#searchsubmit {
    position: relative !important;
    }
  • jsegal

    Thank you Michelle!

    I replaced the existing CSS with the above and I tried to reinstall the plugin but got a Fatal Error.

    Fatal error: Cannot redeclare cws_required_plugins() (previously declared in /home/httpd/html/campaignwebsolutions.com/public_html/style1/wp-content/plugins/cws_easy_volunteer/cws_easy_volunteer.php:47) in /home/httpd/html/campaignwebsolutions.com/public_html/style1/wp-content/plugins/cws_easy_volunteer 3.15a/cws_easy_volunteer.php on line 92

  • Michelle Shull

    Hey there, Joe!

    Well that's certainly troubling! I don't think there's anything in my CSS that would have triggered a fatal error in your PHP files, but let's undo those changes and see if we can get everything back in order.

    Let's go back to square one and put the original CSS you had in place back.

    I've still got your credentials, I'll try fixing this up from the admin side.

    Thanks, Joe!

  • Michelle Shull

    Hey Joe!

    Okay, so both of them in my screenshot below are intentional? Only one is active, but I see it installed twice here. If that's what you meant to do, that's fine.

    I haven't tried to edit anything since I put the code that worked in your custom css area on the site where I have access, so I don't think there's a permission issue.

    I was going to simply add the changes to the plugin file itself, but when I pulled up the plugin editor on that site, I saw two copies of the volunteer plugin I could choose from to edit, I didn't want to edit the wrong file there. I'll work around it. :slight_smile:

    I also missed your question about where CSS Hero adds CSS, from the email contact. I'm guessing it creates it's own custom file and then inserts a call into the header for your theme, but it might also store changes in the database, like Upfront does. I'm not entirely sure, but I'll take a look. :slight_smile: It's a really neat tool, I used it to check the mobile view on your site, and I was really impressed with it. I'm considering using it on one of my production sites.

    Thanks, Joe!

  • Michelle Shull

    Okay, Joe!

    It looks like the CSS file isn't in fact editable via the plugin editor, so we're going to walk through this step by step.

    1. Restore the original CSS that worked.
    1a. Hit ctrl-F to bring up the find tool.

    2. Add this line:

    .cws_easy_volunteer_member_form {
      width: 90% !important;
    }

    2a. AFTER

    .cws_easy_volunteer_member_form * {
    
        margin: 0;
    
    }

    3. Find this:

    .cws_easy_volunteer_member_form form .input,
    
    .cws_easy_volunteer_member_form input[type="text"], .cws_easy_volunteer_member_form select {
    
        color: #555;
    
        font-weight: 200;
    
        line-height: 1;
    
        width: 360px;
    
        padding: 3px;
    
        margin-top: 2px;
    
        margin-right: 6px;
    
        margin-bottom: 16px;
    
        border: 1px solid #29ABE2;
    
        background:  #F2F2F2;
    
        color:#000000;
    
        outline: none;
    
        -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    
        box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    
    }

    3a. CHANGE this: width: 360px;
    to this: width: auto !important;

    4. Find this:

    .mobile #cws_easy_volunteer_member_form {
    
        padding: 20px 0;
    
    }

    4a. Paste this in BEFORE that.

    //make long comment field responsive
    #d.input {
    width: 95% !important;
    }
    
    //make search button stick to search form
    input#searchsubmit {
    position: relative !important;
    }

    If the WordPress gods and goddesses are smiling upon us, this should do it. :slight_smile:

  • jsegal

    Ok I did what you recommended.
    It made the form fields responsive except the text input field for comments.
    The other thing is it totally messed up the admin page for the plugin.

    Joe

    /* cws_easy_volunteer_member_form */
    
    .cws_easy_volunteer_member_form * {
    
        margin: 0;
    
    }
    
    .cws_easy_volunteer_member_form {
      width: 90% !important;
    }
    
    .mce-tinymce.mce-container.mce-panel {float:left;width: 600px!important;}
    
    #left_align p{padding:0!important;}
    
    .cws_easy_volunteer_member_form form, #update p{float:left!important;width:100%!important;padding:8px 0;}
    
    #cws_preview .cws_easy_volunteer_member_form form{width:625px!important;}
    
    #cws_preview .cws_easy_volunteer_address.input{width: 28%!important;}
    
    #cws_preview form .cws_easy_volunteer_state {width: 28%!important;margin-top: 12px;}
    
    #update select{float:left!important;}
    
    #mceu_81 {display: none;}
    
    .cws_easy_volunteer_member_form form {
    
        margin: 0px 0px 25px 8px;
    
        padding:0px 14px;
    
        font-weight: normal;
    
        background: #fff;
    
        border: 1px solid #e5e5e5;
    
        -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;
    
        box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;
    
    }
    
    .cws_easy_volunteer_member_form form .forgetmenot {
    
        font-weight: normal;
    
        float: left;
    
        margin-bottom: 0;
    
    }
    
    .cws_easy_volunteer_member_form .button-primary {
    
        float: right;
    
    }
    
    #cws_easy_volunteer_member_form form p {
    
        margin-bottom: 0;
    
    }
    
    #cws_easy_volunteer_member_form form p.submit {
    
        padding: 0;
    
    }
    
    .cws_easy_volunteer_member_form label {
    
        color: #0071BC;
    
        font-size: 14px;
    
        width: 100%;
    
        float: left;
    
        cursor: text;	
    
    }
    
    .cws_easy_volunteer_member_form form .forgetmenot label {
    
        font-size: 12px;
    
        line-height: 19px;
    
    }
    
    .cws_easy_volunteer_member_form h1 a {	
    
        background-size: 274px 63px;
    
        background-position: top center;
    
        background-repeat: no-repeat;
    
        width: 326px;
    
        height: 67px;
    
        text-indent: -9999px;
    
        outline: none;
    
        overflow: hidden;
    
        padding-bottom: 15px;
    
        display: block;
    
    }
    
    #cws_easy_volunteer_member_form {
    
        padding:10px;
    
    }
    
    #cws_easy_volunteer_member_form_error,
    
    .cws_easy_volunteer_member_form .message {
    
        margin: 0 0 16px 8px;
    
        padding: 12px;
    
    }
    
    .cws_easy_volunteer_member_form #nav,
    
    .cws_easy_volunteer_member_form #backtoblog {
    
        text-shadow: #fff 0 1px 0;
    
        margin: 0 0 0 16px;
    
        padding: 16px 16px 0;
    
    }
    
    #backtoblog {
    
        padding: 12px 16px 0;
    
    }
    
    .cws_easy_volunteer_member_form form .input,
    
    .cws_easy_volunteer_member_form input[type="text"], .cws_easy_volunteer_member_form select {
    
        color: #555;
    
        font-weight: 200;
    
        line-height: 1;
    
         width: auto !important;
    
        padding: 3px;
    
        margin-top: 2px;
    
        margin-right: 6px;
    
        margin-bottom: 16px;
    
        border: 1px solid #29ABE2;
    
        background:  #F2F2F2;
    
        color:#000000;
    
        outline: none;
    
        -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    
        box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    
    }
    
    .cws_easy_volunteer_member_form input:hover
    
    {background-color: #FFFFFF;}
    
    .cws_easy_volunteer_member_form #pass-strength-result {
    
        width: 250px;
    
        font-weight: bold;
    
        border-style: solid;
    
        border-width: 1px;
    
        margin: 12px 0 6px;
    
        padding: 6px 5px;
    
        text-align: center;
    
    }
    
    //make long comment field responsive
    #d.input {
    width: 95% !important;
    }
    
    //make search button stick to search form
    input#searchsubmit {
    position: relative !important;
    }
    
    .mobile #cws_easy_volunteer_member_form {
    
        padding: 20px 0;
    
    }
    
    .mobile #cws_easy_volunteer_member_form form,
    
    .mobile #cws_easy_volunteer_member_form .message,
    
    .mobile #cws_easy_volunteer_member_form_error {
    
        margin-left: 0;
    
    }
    
    .mobile #cws_easy_volunteer_member_form #nav,
    
    .mobile #cws_easy_volunteer_member_form #backtoblog {
    
        margin-left: 8px;
    
    }
    
    .mobile #cws_easy_volunteer_member_form h1 a {
    
        width: auto;
    
    }
    
    body.interim-cws_easy_volunteer_member_form {
    
        height: auto;
    
    }
    
    .interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form {
    
        padding: 0;
    
        margin: 5px auto 20px;
    
    }
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form h1 a {
    
        width: auto;
    
    }
    
    .interim-cws_easy_volunteer_member_form #cws_easy_volunteer_member_form_error,
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form .message {
    
        margin: 0 0 16px;
    
    }
    
    .interim-cws_easy_volunteer_member_form.cws_easy_volunteer_member_form form {
    
        margin: 0;
    
    }
    
    div.cws_easy_volunteer_member_form {font-size: 16px;}
    
    #volunteer_users td, #resultset table {font-size: 17px;}
    
    #volunteer_users td, #resultset td {padding: 10px;margin: 10px;}
    
    .cws_easy_volunteer_member_form input[type=checkbox], input[type=radio], select {width: auto!important;}
    
    #cws_easy_volunteer_send_msg {margin: 0;margin-left:6px;margin-right:6px;}
    
    #left_align{float:left;width:60%;padding:10px;}
    
    #right_align{float:left;width:241px;margin: 24px;}
    
    .headings{font-size: 15px;border: 1px solid #CCC;background: #FFF;padding:10px;}
    
    .alert-danger {background-color: #f2dede;border-color: #ebccd1;color: #a94442;padding: 10px;}
    
    div#resultset {padding: 10px;}
    
    #cws_preview form {padding:15px;}
    
    #cws_preview input[type=radio]{margin-left:5px;margin-right:5px;margin-top: 0;margin-bottom: 0;}
    
    #cws_admin textarea{width:50%;}
    
    .alert-danger {
    
        background-color: rgb(242, 222, 222);
    
        border-color: rgb(235, 204, 209);
    
        color: rgb(169, 68, 66);
    
    }
    
    .alert-warning {
    
        background-color: rgb(252, 248, 227);
    
        border-color: rgb(250, 235, 204);
    
        color: rgb(138, 109, 59);
    
    }
    
    .alert-success {
    
        background-color: #dff0d8;
    
        border-color: #dff0d8;
    
        color: #3c763d;
    
    }
    
    .info, .alert {
    
        padding: 15px;
    
        margin-bottom: 20px;
    
        border: 1px solid rgba(0, 0, 0, 0);
    
        border-radius: 4px;
    
        margin: 15px 0;
    
        width: 50%;
    
    }
    
    .required{color:red;}
    
    .padding-up-5x{padding:5px 0;}
    
    .padding-up-10x{padding:10px 0;}
    
    #cws_preview .display_a_lawn{padding-bottom:6px;}
    
    #cws_preview input[type=checkbox] {margin-top: 10px;}
    
    .info .close {margin-top: -36px;}
    
    .close {float: right;cursor:pointer;font-weight:800;}
    
    .cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{width: 28%!important;}
    
    .cws_easy_volunteer_member_form form .cws_easy_volunteer_state {width: 28%!important;}
    
    #left_align p.custom_msg_text{padding-top: 15px!important;}
    
    #loading{
    
        width: 100%;
    
        position: absolute;
    
        top: 100px;
    
        left: 100px;
    
        margin-top:200px;
    
    }
    
    #formtable .pagination ul li.inactive,
    
    #formtable .pagination ul li.inactive:hover{
    
        background-color:#ededed;
    
        color:#bababa;
    
        border:1px solid #bababa;
    
        cursor: default;
    
    }
    
    #formtable .data ul li{
    
        list-style: none;
    
        font-family: verdana;
    
        margin: 5px 0 5px 0;
    
        color: #000;
    
        font-size: 13px;
    
    }
    
    #formtable .pagination{
    
        width: 800px;
    
        height: 25px;
    
    }
    
    #formtable .pagination ul li{
    
        list-style: none;
    
        float: left;
    
        border: 1px solid #006699;
    
        padding: 2px 6px 2px 6px;
    
        margin: 0 3px 0 3px;
    
        font-family: arial;
    
        font-size: 14px;
    
        color: #006699;
    
        font-weight: bold;
    
        background-color: #f2f2f2;
    
    }
    
    #formtable .pagination ul li:hover{
    
        color: #fff;
    
        background-color: #006699;
    
        cursor: pointer;
    
    }
    
    .go_button
    
    {
    
        background-color:rgb(0, 102, 153);border:1px solid #006699;color:#FFF;padding:8px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;font-weight:bold;
    
    }
    
    .total
    
    {
    
        float:right;font-family:arial;color:#999;
    
    }
    
    h3.view_head {float: left;padding-right: 10px;}
    
    div#three {float: left;padding: 10px 0;}
    
    div#four {float: left;padding: 10px;}
    
    #resultset hr{float:left;width:100%;}
    
    #resultset input[disabled="disabled"], #resultset textarea[disabled="disabled"] {background: rgb(211, 211, 211);border: 0;}
    
    #resultset input, #resultset textarea{background: #FFF;border: 1px solid #ccc;}
    
    .mce-wordcount,.mce-path-item.mce-last{display:none!important;}
    
    @media screen and (max-width:768px) {
    	.cws_easy_volunteer_member_form form{margin:0;}
    	.cws_easy_volunteer_member_form form#cws_easy_volunteer_member_form, #update p{width:411px!important;}
    	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"]{width:100%;}
    	.cws_easy_volunteer_member_form form .input, .cws_easy_volunteer_member_form input[type="text"],
    	.cws_easy_volunteer_member_form select{margin-right:0;}
    	.cws_easy_volunteer_member_form form .cws_easy_volunteer_state,
    	.cws_easy_volunteer_member_form form .cws_easy_volunteer_address.input{width:49%!important;}
    	.cws_easy_volunteer_member_form input[type="submit"]{width:100%;}
    }
  • Michelle Shull

    Hey Joe.

    Change this line (it's right after the second closing curly brace towards the very top)

    .mce-tinymce.mce-container.mce-panel {float:left;width: 600px!important;}

    to this:

    .mce-tinymce.mce-container.mce-panel {float:left;width: 90%important;}

    I'm not sure why the comment field isn't being resized for mobile, that was working yesterday when I added these four elements to your custom CSS file and we had everything looking like you wanted it to, it should work in this CSS here, as well. Regardless, it's not working, and I'm sure you'd like to wrap this up.

    Please try changing:

    //make long comment field responsive
    #d.input {
    width: 95% !important;
    }

    to

    textarea#d.input {
    width: 95% !important;
    }

    Take care now.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.