I am trying to create a customized widget that includes a background image with a text entry form and a button. The wordpress theme I am using is a responsive design built on Twitter Bootstrap. When resizing the browser the form and button are not resizing with the background image. Can anyone help me get this working correctly? You can view the widget at the very bottom of the side bar on the right side of the page on the live site.
Thanks.
<form style="-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center;
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
  <p>
    <input type="text" style="width:170px;height:18px;margin-bottom:-110px;margin-left:-125px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
  </p>
  <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
  <input type="submit" style="margin-bottom:-134px;margin-left:-220px;" value="Subscribe" />
Here is my styles.css (this is a child theme)
/* ------------------------------------------------------------------------ Import Standard Styles */
@import url( '../standard3/style.css' );
/* ------------------------------------------------------------------------ Customizations */
#disqus_thread {
clear: both!important;
background: white;
background: white;
margin: 0 0 40px 0;
position: relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px;
}
.dsq-comment-text p
{
color: black;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 243px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 70px;
}
.widget .signupForm form input {
display: block;
}
//* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 50px;
}
}
/* adjust slightly for larger sizes */
@media screen and (min-width: 980px) {
.widget .signupForm {
width: 343px;
height: 275px;
background-size: 100%;
}
.widget form .signupForm {
right: 160px;
bottom: 70px;
}
}â
/* ------------------------------------------------------------------------ Media Queries */
/* Smartphones */
@media (max-width: 480px) {
}
/* Tablet and Mobile */
@media (max-width: 979px) {
}
/* Mobile to Tablet */
@media only screen and (max-width: 767px) {
}
/* Landscape Tablets */
@media (min-width: 768px) and (max-width: 979px) {
}
/* Desktop */
@media (min-width: 980px) {
}
You’re approaching the positioning of the form incorrectly. With a widget like that, you’re better off declaring a fixed size to the widget, and then positioning the form inside it using absolutely relative positioning. Then you can change the box size and form position for each breakpoint.
Here’s a fiddle that does what you’d like, but in a cleaner way.
** UPDATED FIDDLE **
http://jsfiddle.net/andrewheins/9PrG2/5/
Your son is awesome, by the way.
find
@media (min-width: 768px) and (max-width: 979px) {in bootstrap’s css or add it to you own. After that add:form input {max-width: 10px !important;}It will set width of inputs (all inputs!) to 10px if screen width is lower than 979px;
It works but it’s probably gonna crash your site somewhere so I’d recommend adding some classes/ids to the code of the form and moving all the CSS you now have inline to the stylesheet. It will allow not using the “!important” rule.