Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

I have created a gravity form which I have put into a sidebar widget. I’ve done most of the styling for it but I just can’t get the padding even on both sides.

There’s nothing in my css to suggest that I’ve tweaked the padding or margin so it must be something to do with the sidebar.

I will post screenshots and the url in a private post but the styling for my form is as follows:

body #gform_wrapper_8 {background-color:#4aa9d3; padding:20px; border-radius:15px;}

body #gform_wrapper_8 .gform_body .gform_fields .gfield .gfield_label {display:none;}
body #gform_wrapper_8 .gform_body .gform_fields .gfield .ginput_container {padding-top:0px;
margin-top:-10px;}

body #gform_wrapper_8 .gform_heading .gform_title {color: #fff; text-align:center; padding-bottom:10px;}

body #gform_wrapper_8 .gform_footer input[type=submit] {box-shadow:none;
text-transform:uppercase;
text-shadow:none;
border:1px solid #fff;
font-weight:600;
font-size:14px;
background-color:#f79020;
border-radius:20px;
width:100%;
padding:12px 25px 12px 25px;
margin-bottom:-10px;}

body #gform_wrapper_8 .gform_footer input:hover[type=submit] {box-shadow:none;
text-transform:uppercase;
text-shadow:none;
border:1px solid #5d636a;
font-weight:600;
font-size:14px;
background-color:#5d636a;
border-radius:20px;
padding:12px 25px 12px 25px;}

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

.gform_wrapper ul.gform_fields li.gfield {
    width: 100%;
    padding: 0
}

Hope it helps 🙂

[3b1a2f46-a516-40cf-beba-b611930e4819]

Yes, that has rectified the issue. Thanks

[Paul R]

You’re welcome! 🙂

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Thai]

Hi There,

Please change the previous CSS to this:

.x-sidebar .gform_wrapper ul.gform_fields li.gfield {
    width: 100%;
    padding: 0
}

Hope it helps 🙂

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Thai]

Hi There,

Please delete the previous CSS and add this CSS:

.gform_wrapper #gform_8 .gform_body {
    width: 100% !important;
}

Hope it helps 🙂

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi Thai,

It’s better. I think that’s the best I’m going to get.

Thanks

[Christian]

You’re welcome. Glad we could help. 🙂

[Author]

Posts