How do I get the input boxes closer together, or inline?-CodePudding

I would like all of the elements to be closer together, but I can't seem to hit the right part of the code to do that.

#mc_embed_signup 
{ background: none;  
font-family: Noto Serif Display;  
border radius: 0px;  
font-style: italic;
letter-spacing: 2px;
font-size: 14px;
color: #676767;
overflow-x: hidden; 
overflow-y: hidden;} 

#mc_embed_signup input.fname { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #ffffff;  
letter-spacing: 5px;  
font-size: 11px; 
width: 80%;  
margin: auto;
padding-left: 3px;
text-align: center;
margin-bottom: 1px; 
min-height: 10px;} 

#mc_embed_signup input.lname { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #dee0da;  
letter-spacing: 5px;  
font-size: 11px; 
width: 80%; 
padding-left: 3px;
margin: auto; 
text-align: center; 
margin-bottom: 1px; 
min-height: 10px;} 

#mc_embed_signup input.email { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #dee0da;  
letter-spacing: 5px;  
font-size: 11px; 
width: 80%; 
padding-left: 3px; 
margin: auto; 
text-align: center; 
margin-bottom: 1px;  
min-height: 10px;} 

#mc_embed_signup input.button { 
background-color: #C0D3D9;  
color: #676767;  
border-radius: 0px;  
font-family: Noto Serif Display; 
font-style: italic;  
letter-spacing: 1px;  
font-size: 12px; 
min-width: 110px; margin: auto; display: block;} 
</style>

I might be looking at the wrong part of the code, but I just can't figure out how to get the input boxes and buttons to be closer together.

Does mailchimp have an embedded code in there somewhere usually? It would also be awesome to have the input boxes inline, but every time I add that code, all the boxes just go left aligned and half the size.

CodePudding user response：

You need to remove the minimum height from the input field see the style

#mc_embed_signup { background: none;  
    font-family: Noto Serif Display;  
    border-radius: 0px;  
    font-style: italic;
    letter-spacing: 2px;
    font-size: 14px;
    color: #676767;
    overflow-x: hidden; 
    overflow-y: hidden;} 
    
#mc_embed_signup input.fname { 
    font-family: Noto Serif Display;  
    font-style: light;   
    text-transform: uppercase;  
    color: #676767;  
    border-radius: 0px;  
    border-color: #ffffff;  
    letter-spacing: 5px;  
    font-size: 11px; 
    width: 80%;  
    margin: auto;
    padding-left: 3px;
    text-align: center;
    margin-bottom: 5px; 
} 
    
#mc_embed_signup input.lname { 
    font-family: Noto Serif Display;  
    font-style: light;   
    text-transform: uppercase;  
    color: #676767;  
    border-radius: 0px;  
    border-color: #dee0da;  
    letter-spacing: 5px;  
    font-size: 11px; 
    width: 80%; 
    padding-left: 3px;
    margin: auto; 
    text-align: center; 
    margin-bottom: 5px; 
} 
    
    #mc_embed_signup input.email { 
    font-family: Noto Serif Display;  
    font-style: light;   
    text-transform: uppercase;  
    color: #676767;  
    border-radius: 0px;  
    border-color: #dee0da;  
    letter-spacing: 5px;  
    font-size: 11px; 
    width: 80%; 
    padding-left: 3px; 
    margin: auto; 
    text-align: center; 
    margin-bottom: 5px;  
} 
    
#mc_embed_signup input.button { 
    background-color: #C0D3D9;  
    color: #676767;  
    border-radius: 0px;  
    font-family: Noto Serif Display; 
    font-style: italic;  
    letter-spacing: 1px;  
    font-size: 12px; 
    min-width: 110px; margin: auto; 
    display: block;
}

If you want to inline all the input fields just the style also If you set inline you need to increase your box width also see the screenshot https://prnt.sc/CS1fC6s_Ocqw

#mc_embed_signup {
    display: flex;
    flex-wrap: wrap;
}
#mc_embed_signup input.button { 
    width: 100%;
}

CodePudding user response：

#mc_embed_signup 
{ 
width: 60%;
display: flex;

margin: 0 auto;
flex-direction: column;
background: none;  
font-family: Noto Serif Display;    
font-style: italic;
font-size: 14px;
color: #676767;} 

#mc_embed_signup input.fname { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #ffffff;  
letter-spacing: 5px;  
font-size: 11px; 
width: 100%;  
margin: auto;
padding-left: 3px;
text-align: center;
margin-bottom: 1px; 
min-height: 10px;} 

#mc_embed_signup input.lname { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #dee0da;  
letter-spacing: 5px;  
font-size: 11px; 
width: 100%; 
padding-left: 3px;
margin: auto; 
text-align: center; 
margin-bottom: 1px; 
min-height: 10px;} 

#mc_embed_signup input.email { 
font-family: Noto Serif Display;  
font-style: light;   
text-transform: uppercase;  
color: #676767;  
border-radius: 0px;  
border-color: #dee0da;  
letter-spacing: 5px;  
font-size: 11px; 
width: 100%; 
padding-left: 3px; 
margin: auto; 
text-align: center; 
margin-bottom: 1px;  
min-height: 10px;} 

#mc_embed_signup input.button { 
background-color: #C0D3D9;  
color: #676767;  
width: 50%;
margin: 0 auto;
border-radius: 0px;  
font-family: Noto Serif Display; 
font-style: italic;  
letter-spacing: 1px;  
font-size: 12px; 
min-width: 110px; margin: auto; display: block;} 
#mc_embed_signup{
height: 40px;
}
#mc_embed_signup input{
    height: 40px;
    margin-top: 10px !important
}

<from id="mc_embed_signup">
    <input type="text"  placeholder="FIRST NAME">
    <input type="text"  placeholder="LAST NAME">
    <input type="text"  placeholder="EMAIL">
    <input type="button"  value="JOIN">
</from>