[Resolved] css wont affect inputs :(

Home Forums Support [Resolved] css wont affect inputs :(

Home Forums Support css wont affect inputs :(

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #868062
    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.

    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;
    }
    #868141
    Leo
    Staff
    Customer Support

    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?

    #868213
    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.

    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;
    }
    #868599
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #870005
    Leif

    yay i messed around with those values a bit and everything is great now πŸ™‚

    #870693
    Tom
    Lead Developer
    Lead Developer

    Awesome πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.