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&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; }