Hey guys,
I’m a bit of a noob with css, but I try 🙂
I added a newsletter sign up box on my homepage for the mobile theme. It looks good, but there it is aligned with the latest post below. I would like it to be full width, just like the featured posts are.
What custom css could I use to achieve this? It would be great if you could point me in the right direction. Below the custom CSS (I copy-pasted it from regular page):
#mc_embed_signup input.email {
display: block;
padding: 6px 0;
/*margin: 0 40% 15px 0;*/
margin: auto;
/*margin-bottom: 15px;*/
text-indent: 5px;
width: 70%;
min-width: 80px;
/*margin-left: 1px;*/
line-height: 14px;
border-radius: 5px;
}
#mc_embed_signup {
background: #669fb7;
clear: left;
font: 14px;
width: 100%;
max-width: 100%;
border-radius: 10px;
margin-top: 11px;
}
#mc_embed_signup input.button {
display: block;
margin-bottom: 11px;
margin: auto;
width: 40%;
}
#mc_embed_signup .button {
clear: both;
background-color: #3b5998;
border: 0 none;
border-radius: 4px;
color: white;
font-size: 15px;
font-weight: bold;
height: 34px;
line-height: 31px;
padding: 0;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
max-width: 400px;
}
#mc_embed_signup input {
border: 1px solid grey;
-webkit-appearance: none;
}
#mc_embed_signup form {
display: block;
position: relative;
text-align: left;
padding: 20px 0 8px 0%;
}
#mc_embed_signup label {
display: block;
font-size: 16px;
padding-bottom: 5px;
font-weight: bold;
color: white;
margin-right: 10px;
}
Hi,
It will help us provide the answer if we can actually be able to inspect the site itself and check the widget css. Please provide a link to your site.
Thank you!
Here you go > http://ow.ly/EnDg300ZE7e
Hello VoZz,
Please notice that this type of plugins is not tested with our theme and I am not aware what you have implemented this code on your backend, sorry! If you want to display the Newsletter in the full-width mode for your mobile mode, you will have to use a bit of CSS code to do that. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
@media (max-width:767px){
.td-container{
padding-left: 1px;
padding-right: 1px;
}
}
The result you should see here -> http://screencast.com/t/bpyEluYz
Thanks for your understanding!
