[Resolved] css wont affect inputs :(

[Leif]

I have this (below) code to try to style the text inputs on this page but it doesnt apply itself…I have no idea what Im doing wrong 🙁

Im trying to get rid of the little grey borders on the inputs and also be able to adjust the size of the input box…since they seem oddly big right now.

https://fiveyearfireescape.com/sections-trial/

this is the code for my inputs

<p><!-- wp:paragraph --></p><p><code>
[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]EARLY ACCESS ARTICLE SUBSCRIPTION[/lgc_column] 
[lgc_column grid="25" tablet_grid="50" mobile_grid="100"] <input name="EMAIL" required="" type="email" placeholder="Email Address" />[/lgc_column]
[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]<input style="text-align: center;" name="FNAME" required="" type="text" placeholder="First Name" />[/lgc_column]
[lgc_column grid="25" tablet_grid="50" mobile_grid="100" last="true"]<input type="submit" value="Subscribe" />	[/lgc_column]
</code></p><p><br /><!-- /wp:paragraph --></p>

this is in my css on the simple css editor on this specific page

input[type=email], input[type=text]{
  background: #222;
  border: none;
  color: #222;
  padding: 0px 0px;
  margin: 0px 0px;
  cursor: text;
}

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

I don’t see the CSS being added. Have you tried clearing the caching plugin?

Also have you tried just using the customizer options?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leif]

OK so if I ‘customize’ I cant figure out how to edit these things. I’m just trying to kill the border and make the button line up with the text boxes. I dont care about the background color etc.

I know my simple css is loading because my ghost button at the bottom works but somehow its not effecting my inputs (see entire css below). I did however find something in ‘additional CSS’ when looking around customize (which I guess just comes with GP) which had css for those input types…so maybe it was overriding my css.

I edited that, successfully got rid of the borders but still I dont know how to make the submit button match the height of the text boxes.

http://www.screencast.com/t/PgmaYC2u7g

Also if it matters I wanted to make these inputs into a mailchimp form…i figured once I could make the inputs how I like the mailchimp form would just work out…hopefully 🙂

@media (min-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .site-logo {
        margin-right: auto;
    }
}

.button.ghost, .button.ghost:visited {     
    background: transparent;     
    border: 2px solid #222; 
    color: #222;
    border-radius: 3px;
} 

.button.ghost:hover, .button.ghost:active {     
    background: #222;     
    color: #FFF;     
    border: 2px solid transparent; 
    border-radius: 3px;
}

input[type=email], input[type=text]{
  background: #222;
  border: none;
  color: #222;
  padding: 0px 0px;
  margin: 0px 0px;
  cursor: text;
}

[Tom]

Hi there,

In Customize > Additional CSS, find this:

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
	padding: 16px 20px;
	margin-top: 0px;
	border-radius: 0px;
	transition: all 0.6s ease 0s;
}

And replace it with this:

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    padding: 10px 15px;
    margin-top: 0px;
    border-radius: 0px;
    transition: all 0.6s ease 0s;
    font-size: 16px;
}

Let me know if that helps or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Leif]

yay i messed around with those values a bit and everything is great now 🙂

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts