• Locked
No replies
Thu, 2015-01-15 10:21
sgcss
sgcss's picture
Offline
newbie
Last seen: 6 years 28 weeks ago
Timezone: GMT-8
Joined: 2015-01-14
Posts: 3
Points: 6

The site is: www.bullseye-promotions.com and it's regarding the form you see right below the slider.

I figured out all the issues with my form so it's horizontal.

Now I have one last issue.

I want the blue background of the form to have less of a height so the bottom section has the same margin as above the form.

I can do it with fixed height such as 50px. However, I also want this to be responsive, so the height will change as the fields stacks one above the other as the screen's width shrinks. For that reason, I want to use percentage.

THE PROBLEM...

Minimizing the height using percentages has no effect and I don't know why.

Here is the code on the page itsel. You'll see that I use shortcodes. I provide the css code below. Pay special attention to the class "belowsliderformalign" which seems to be the class that would dictate the height of the background color. 

[fullwidth backgroundcolor="#97aace" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="left top" backgroundattachment="scroll" video_webm="" video_mp4="" video_ogv="" video_preview_image="" overlay_color="" overlay_opacity="0.5" video_mute="yes" video_loop="yes" fade="no" bordersize="1px" bordercolor="" borderstyle="solid" paddingtop="0px" paddingbottom="0px" paddingleft="0px" paddingright="0px" menu_anchor="" equal_height_columns="no" hundred_percent="no" class="belowsliderfullwidth" id=""][fusion_text]
<!-- Begin MailChimp Signup Form -->
<div class="belowsliderformalign">
<div id="mc_embed_signup">
  <form class="validate" id="mc-embedded-subscribe-form" action="//bullseye-promotions.us9.list-manage.com/subscribe/post?u=709f1b9cd564df000100b3c66&amp;id=f772255011" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
     <div class="mc-field-group">
          <div class="belowslidersubscribenow"><img src="http://bullseye-promotions.com/bp2/wp-content/uploads/2015/01/subscribe-here-blue-bg.png" alt="Subuscribe Here" /></div>
        <div class="emailbsp"> <input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="*Email" size="15"/></div>
           <div class="fnamebs"><input class="required" id="mce-FNAME" type="text" name="FNAME" placeholder="*First Name" size="15"/></div>
         <div class="belowsliderformsubmit"> <input class="button" id="mc-embedded-subscribe" type="image" img src="http://bullseye-promotions.com/bp2/wp-content/uploads/2015/01/send-submit.png"/></div>
  </form>
</div>
</div>
<!--End mc_embed_signup-->
[/fusion_text][/fullwidth]
</code]
 
And the custom css...
 
Note:  The theme has it's own wordpress css stylesheet.  I didn't touch that.  I use the theme option section which allows me to add custom css.
 
[code]
.header-v4 #header {
      height: 105px !important;
   padding-bottom: 1px !important;
margin-bottom: 0px !important;
}
.largertexthome {
font-size: 19px !important;
font-weight: normal !important;
line-height:26px;
letter-spacing:0.5px;
}
.listlargetext {
font-size: 19px; !important;
line-height:26px;
letter-spacing:0.5px;
margin-bottom: 15px;
}
 
.headerphone a {position: relative; top: 20px; margin-right: 25px; padding: 40px 36px 16px 30px; font-size:19px; background-image: url(<a href="http://bullseye-promotions.com/bp2/wp-content/uploads/2014/07/call-bg-white.png" rel="nofollow">http://bullseye-promotions.com/bp2/wp-content/uploads/2014/07/call-bg-white.png</a>); clear:both; font-weight:bold;}
 
.belowsliderfullwidth {
    margin-top: -50px;
    padding: 0px;
height: 5% !important
}
 
/********************
MailChimp Custom Style for Horizontal Bar form
*********************/
.belowsliderformalign {
   float: right;
    width: 70%;
   height: 100% !important;
   text-align: right;
   padding: 0px !important;
}
.mc-field-group {
 
	padding: 0px 0px 0px 0px;
}
 
.belowslidersubscribenow {
        display: inline-block;
        width: 198px;
        height: 21px;
       margin: 0px 5px 0px 5px;
}
.emailbsp {
        margin: 0px 5px 5px 5px;
        display: inline-block;
}
 
.fnamebs {
        margin: 0px 5px 5px 5px;
        display: inline-block;
}
 
.belowsliderformsubmit {
       margin: 0px 5px 5px 5px;
       display: inline-block;
display: inline-block;
}
 
#mce-EMAIL {
font-family: "PT Sans",Arial,Helvetica,sans-serif !important;
background: #97aace url(../bp2/wp-content/uploads/2015/01/envelope-image-form-field-3-web.png) no-repeat left;
height: 45px;
color: #ffffff !important;
font-size: 18px !important;
	border-style: solid;
    border-color: #ffffff !important;
padding: 5px 5px 5px 45px;
}
 
#mce-FNAME {
font-family: "PT Sans",Arial,Helvetica,sans-serif !important;
background: #97aace url(../bp2/wp-content/uploads/2015/01/person-inside-name-form-field3.png) no-repeat left;
height: 45px;
color: #ffffff !important;
font-size: 18px !important;
	border-style: solid;
    border-color: #ffffff !important;
padding: 5px 5px 5px 45px;
box-shadow: none;
border-width: 2px !important;
}

Top
Tags: