Docs

[Ronald]

Hello,

I have a tiny problem on this website: http://jhbeye.com

On the main page is a contact form, upon submitting the form it gives a white background and the border of the form is completely off.

Also, the success message appears above and below the form. You may test it, dot worry about completed response.

Please advise me on how I can achieve this:
1. No white background
2. No border around the form
3. Only one success message, preferably at the bottom.

I really appreciate your help.

PS. Attached screenshot.

[Jade]

Hi there,

Please add this code in the customizer:

.wpcf7-response-output {
    background: transparent;
    border: 0;
}

Please see this link on how to move the response message of the form.

Hope this helps.

[Ronald]

Hi Jade,

Unfortunately that didn’t help. Could you please have a closer look. I also have this in my custom css, could this be the problem:

/* FORM */
#form {
padding: 5px;
width: auto;
margin: 20px auto;
}

#contentleft {
width: 50%;
float: left;
padding: 5px 15px;
}

#contentright {
width: 50%;
padding: 5px 15px;
float: left;
}

#bottom {
clear: both;
padding: 0 15px;
}

/*MEDIA QUERIES*/

/* for 980px or less */
@media screen and (max-width: 980px) {

#form {
width: 94%;
}
#contentleft {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

#contentright {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

#bottom {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

/* for 700px or less */
@media screen and (max-width: 600px) {

#contentleft {
width: auto;
float: none;
}

#contentright {
width: auto;
float: none;
}
#bottom {
width: auto;
float: none;
}
}

/* for 480px or less */
@media screen and (max-width: 480px) {

#contentleft {
background: #f8f8f8;
}
#contentright {
background: #f0efef;
}
#contentleft, #contentright, #bottom {
margin-bottom: 5px;
}

#contentleft, #contentright, #bottom {
border: solid 1px #ccc;
}

/*Contact Form Mod*/

.wpcf7-response-output {
background: transparent !important;
border: 0 !important;
}

[Nabeel A]

Hi again,

Thank you for updating the thread. Seems like you’re not closing your media queries. That could be breaking the code. Please replace your code in Customizer with this one:

/*Contact Form Mod*/

.wpcf7-response-output {
background: transparent !important;
border: 0 !important;
}

/* FORM */
#form {
padding: 5px;
width: auto;
margin: 20px auto;
}

#contentleft {
width: 50%;
float: left;
padding: 5px 15px;
}

#contentright {
width: 50%;
padding: 5px 15px;
float: left;
}

#bottom {
clear: both;
padding: 0 15px;
}

/*MEDIA QUERIES*/

/* for 980px or less */
@media screen and (max-width: 980px) {

#form {
width: 94%;
}
#contentleft {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

#contentright {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}

#bottom {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

#contentleft {
width: auto;
float: none;
}

#contentright {
width: auto;
float: none;
}
#bottom {
width: auto;
float: none;
}
}

/* for 480px or less */
@media screen and (max-width: 480px) {

#contentleft {
background: #f8f8f8;
}
#contentright {
background: #f0efef;
}
#contentleft, #contentright, #bottom {
margin-bottom: 5px;
}

#contentleft, #contentright, #bottom {
border: solid 1px #ccc;
}
}

Let us know how this goes!

[Ronald]

Hi,

Thank you very much, I really appreciate your help.
It works perfectly now.

Ronald.
🙂

[Friech]

Glad we could help, please feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers!

[Author]

Posts