Some help with CSS needed / Padding

Im using 1LD form, but when I add it to a right column, Padding is set to 50px between input lines.

I need to set padding-bottom: to 0px; but I cant figure out how to do that. Help! :roll_eyes:

https://www.wetweim.com/lt/nightwatch.php!Screenshot 2020-11-07 at 11.11.33|690x371, 50%

Give this a try:

form div {
    padding-bottom: 0px;
}

Thank you, but it does not help.

I don’t see where you added the code?

I tested this on the browsers web tools and it should work if placed in the proper place.

Well, I placed into CSS tab. I did not published it previously, because in preview it didnt worked. Now it is published. I think Im missing something.

Screenshot 2020-11-07 at 15.43.03

Copy and paste the code above.

There’s no # in front of form.

Done. No effect.

Try this CSS:

.com_onelittledesigner_stacks_Super_Forms_stack form div {
    padding-bottom: 0px;
}

I need to see what you have done.

I don’t have that theme, so I can only test from within the browser.

It’s the theme that for some unknown reason appears to be adding that massive amount of bottom padding.

If you are sure you have the code in the proper place and are sure you have it correctly entered than if the theme has the style sheets in the wrong order then you may have to add the !important attribute.

I don’t think that’s the issue glancing at the code.

This one might be worth a try too:

.controls {
    padding-bottom: 1em;
}

I was able to test this form with another page of mine. It seems that my CSS “@media only screen and” was affecting the code. When I removed it from CSS - it worked, so I decided to put it to the very end of the code and it worked to.

Thank you all, for your advices!

It looks like you are missing the closing curly bracket }for the media query.
Anything that you placed after the media query would be part of that query.

Didn’t see it before, hard to spot in a screenshot. Proper formatting with indentations make things like this easier to see


@media screen and (max-width: 992px) {
  #featue {
    background-color: blue;
  }
}

And adding comments to code like CSS and JavaScript is helpful as well

/*  Media queries need to be encapsulated inside curly brackets { } */
@media screen and (max-width: 992px) {  /* Opening curly for media query  */
  #feature {    /* opening curly for CSS selector   */
    background-color: blue;
  }   /* closing curly for CSS selector */
}  /* closing curly for media query. 
3 Likes

that’s correct. The missing curly bracket led the browser to interpret all following code to be relevant for the media query conditions only (and since that was a max width of 992px you didn’t see any change on larger screens).

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.