Hi.
To get the “Subscribe” button to drop to the next line, copy and paste the following CSS snippet into your style.css file:
#subbutton {
display: block;
margin: auto;
}
Next, in order to stop the “Email Address” box from being ‘off-line,’ firstly locate the following code in your CSS file:
.enews #subbox {
background-color: #f5f5f5;
border: 1px solid #aaa;
color: #666;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
margin: 0 -7px 0 0;
padding: 6px 5px;
width: 160px;
}
Then delete the margin declaration from the given snippet so that you are left with the following:
.enews #subbox {
background-color: #f5f5f5;
border: 1px solid #aaa;
color: #666;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
padding: 6px 5px;
width: 160px;
}
I hope that works. Let me know if there’s anything else you need help on. 🙂
I am missing something somewhere and can’t find it.
Here is what I have code wise for the Newsletter.
#newsletter {
background-color: #222;
color: #fff;
line-height: 1.5;
margin: 20px;
padding: 32px;
padding: 2rem;
text-align: center;
}
#newsletter p {
color: #fff;
margin-bottom: 24px;
margin-bottom: 1.5rem;
}
#newsletter input {
margin: 5px 0 0;
width: 30%;
}
#newsletter h4 {
color: #fff;
}
#newsletter .enews #subbox,
#newsletter .enews #subbox1,
#newsletter .enews #subbox2 {
padding: 10px;
width: 50%;
}
#subbutton {
display: block;
margin: 0;
}
.enews #subbox {
background-color: #f5f5f5;
border: 1px solid #aaa;
color: #666;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
padding: 6px 5px;
width: 160px;
}
Nothing is working. It drops the subscribe button to the next line but everything is still out of alignment.
You need to copy the #subbutton
code snippet exactly as I gave it in my original reply i.e. the value for margin should be auto
NOT 0
Here it is again:
#subbutton {
display: block;
margin: auto;
}
You didn’t need to copy and paste the second code snippet I gave for .enews #subbox
as it is already in your CSS file. It is now in there twice. The “Email Address” box is still out of line as the margin is still being called from this. Please delete the duplicate code that you inserted. If you can’t locate the original code, copy and paste the following at the bottom of your newsletter code instead:
.enews #subbox {
margin-right: 0 !important;
}
Thank you, I actually had to tweak it a little bit more. Here is my final code for it!
`
#newsletter {
background-color: #222;
color: #fff;
line-height: 1.5;
margin: 20px;
padding: 32px;
padding: 2rem;
text-align: center;
}
#newsletter p {
color: #fff;
margin-bottom: 24px;
margin-bottom: 1.5rem;
}
#newsletter input {
margin: 5px 0 0;
width: 30%;
}
#newsletter h4 {
color: #fff;
}
#newsletter .enews #subbox,
#newsletter .enews #subbox1,
#newsletter .enews #subbox2 {
padding: 10px;
width: 50%;
}
#newsletter #subbutton {
display: block;
margin: 5px auto 0;
}
.enews #subbox {
background-color: #f5f5f5;
border: 1px solid #aaa;
color: #666;
font-family: ‘PT Sans’, sans-serif;
font-size: 14px;
margin: 4px 0 0 0;
padding: 6px 5px;
width: 160px;
}’
THANKS AGAIN!
Just wanted to drop a quick note to say thanks to @siobhyb for helping out. Much appreciated!
Yep I agree! Thank you very much.
You’re welcome. Glad you solved the problem 🙂