html5 - How do I get my footer and columns and forms within the footer to be responsive properly -
how footer responsive? problems: when screen shrinks down below 1200px column on right side (footer-right) starts getting cut off , middle columns form input field shrinks down small. when gets approx 750px middle , left column form under first column on left, supposed middle forms input field 1px wide; , right form offset far left instead of in middle. first column on left responsiveness working not other 2 (middle , far right)
the appreciated!
<footer class="footer-distributed"> <div class="row"> <div class="footer-left col-sm-3 col-xs-12"> <h3>text</h3> <p class="footer-links"> <a href="index.html">home</a> · <a href="about.html">about us</a> · <a href="products.html">products</a> · <a href="support.html">support</a> · <a href="contact.html">contact</a> </p> <h3>text</h3> <p class="footer-links"> <a href="text.html">text</a> · <a href="text.html">text</a> · <a href="text.html">text</a> · <a href="text.html">text</a> </p> <p class="footer-company-name"> <a href="http://www.home.com">text</a><span> © text</span></p> <div class="footer-social"> <ul class="social"> <li> <a href="https://www.facebook.com/text/" class="facebook"> <i class="ion-social-facebook"></i> </a> </li> <li> <a href="https://twitter.com/text" class="twitter"> <i class="ion-social-twitter"></i> </a> </li> <li> <a href="https://www.linkedin.com/company/text" class="linkedin"> <i class="ion-social-linkedin"></i> </a> </li> <li> <a href="https://text" class="google plus"> <i class="ion-social-googleplus"></i> </a> </li> <li> <a href="https://www.youtube.com/text" class="youtube"> <i class="ion-social-youtube"></i> </a> </li> </ul> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-sub subscribe section-wrapper"> <p class="subscribe-parafoot"> sign our newsletter </p> <p class="subscribe-nowfoot"> text </p> <div class="col-md-8 col-sm-8 col-xs-3 col-sm-push-2"> <form action="" method="post" id="subscribe1"> <div class="input-group"> <input type="email" name="email" class="form-control border-radius" placeholder="email address"> <span class="input-group-btn"> <button class="btn border-radius contactfoot-btn" type="submit">sign up</button> </span> </div> </form> </div> </div> </div> <div class="footer-right col-sm-3 col-xs-8"> <p>contact us</p> <form action="#" method="post" id="contactform"> <input type="text" name="email" placeholder="email" /> <textarea name="message" placeholder="message"></textarea> <button>send</button> </form> </div> </div> </footer> css
.footer-distributed .footer-right p{ text-align: center; vertical-align: top; margin: 0px 0px 20px 0; color: #ffffff; color: #bebebe; font: normal 36px 'roboto', sans-serif; } .footer-distributed .footer-right form{ display: inline-block; } .footer-distributed .footer-right form input, .footer-distributed .footer-right form textarea{ display: block; box-sizing: border-box; border: none; border-radius: 3px; background-color: #fafafa; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1); resize: none; height: 40px; margin-bottom: 15px; font: inherit; font-size: 14px; font-weight: normal; color: #4b4b4b; width: 280px; padding: 10px; } .footer-distributed ::-webkit-input-placeholder { color: #3e3e3e; opacity: 1; } .footer-distributed ::-moz-placeholder { color: #3e3e3e; opacity: 1; } .footer-distributed :-ms-input-placeholder{ color: #3e3e3e; opacity: 1; } .footer-distributed .footer-right form textarea{ height: 75px; margin-bottom: 20px; padding: 10px ; } .footer-distributed .footer-right form button{ border-radius: 3px; background-color: #00bbff; color: #ffffff; border: 0; padding: 6px 40px; font-weight: 500; font-size: 18px; float: right; letter-spacing: 1px; height: 42px; } .footer-distributed .footer-right form button:hover { border-radius: 3px; background-color: #ffffff ; color: #00bbff; border: 1px solid #00bfff; padding: 6px 40px; font-weight: 500; float: right; letter-spacing: 1px; height: 42px; } .footer-social .social { display: inline-block; padding-top: 20px; } .footer-social .social li { display: inline-block; margin-right: 15px; } .footer-social .social li { font-size: 22px; color: #00bfff; } .footer-social .social li:hover { display: inline-block; margin-right: 15px; } .footer-social .social li a:hover { font-size: 22px; color: #087aff; } #copyright a:hover, #copyright nav .menu li a:hover { color: #e4e4e4!important; } #copyright a, #copyright a:hover { text-decoration: none; } .footer-distributed{ background-color: #292c2f; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); width: 100%; font: bold 16px sans-serif; padding: 20px 20px 40px; } .footer-distributed h3{ color: #bebebe; font: normal 36px 'roboto', sans-serif; margin: 0 0 10px; } .footer-distributed .contactfoot-btn:hover { color: #00bfff; background: #fff; border-color: #00bfff; letter-spacing: 1px; font-size: 18px; margin-top: 1px; height: 44px } .footer-distributed .footer-links{ font-size: 18px; color: #00bfff; font-weight: 400; margin: 0 0 10px; padding: 0; } .footer-distributed .footer-links a{ display:inline-block; line-height: 1.8; text-decoration: none; color: inherit; } .footer-distributed .footer-links a:hover{ display:inline-block; line-height: 1.8; text-decoration: none; color: #087aff; } .footer-distributed .footer-company-name{ color: #00bfff; font-size: 14px; font-weight: normal; margin: 0; } .footer-distributed .footer-company-name span{ color: #bebebe; font-size: 14px; font-weight: normal; margin: 0; } .footer-distributed .footer-company-name a{ color: #00bfff; } .footer-distributed .footer-company-name a:hover{ color: #087aff; } .footer-distributed .subscribe-nowfoot { color: #eaeaea; font-size: 16px; line-height: 20px; text-align: center; margin-bottom: 20px; font-weight: 300; margin-left: 10px; margin-right: 10px; padding-right: 10px; padding-left: 10px; } .footer-distributed .btn-form:hover, .footer-distributed .btn-form:active { border: 1px solid #00bfff; background-color: #fff; color: #00bfff; } .footer-distributed .custom-sub-btn { font-size: 18px; background-color: #00bfff; color: #fff; border-color: #00bfff; transition: .4s ease-in-out; letter-spacing: 1px; margin-top: 0px; height: 43px; } .footer-distributed .custom-sub-btn:hover { color: #00bfff; background: #fff; border-color: #00bfff; letter-spacing: 1px; font-size: 18px; margin-top: 0px; height: 43px } .footer-distributed .contactfoot-btn { font-size: 18px; background-color: #00bfff; color: #fff; border-color: #00bfff; transition: .4s ease-in-out; letter-spacing: 1px; margin-top: 1px; height: 44px; } .footer-distributed .contactfoot-btn:hover { color: #00bfff; background: #fff; border-color: #00bfff; letter-spacing: 1px; font-size: 18px; margin-top: 1px; height: 44px } .footer-distributed ::-webkit-input-placeholder { color: #3e3e3e; opacity: 1; } .footer-distributed ::-moz-placeholder { color: #3e3e3e; opacity: 1; } .footer-distributed :-ms-input-placeholder{ color: #3e3e3e; opacity: 1; } .form-sub { margin: 60px; } .form-sub form input { height: 44px; resize: none; } .form-sub .custom-sub-btn{ background-color: #00bfff; color: #fff; border-color: #00bfff; transition: .4s ease-in-out; letter-spacing: 1px; margin-top: 1px; } .form-sub .custom-sub-btn:hover{ color: #00bfff; background: #fff; border-color: #00bfff; font-weight: 500; letter-spacing: 1px; } .subscribe-parafoot { color: #bebebe; font-size: 170%; font-weight: 700; line-height: 28px; margin: -70px 0 20px; text-align: center; } .subscribe-now { color: #727272; font-size: 16px; line-height: 28px; margin: 0px 0 20px; text-align: center; } .subscribe-para { color: #1c1c1c; font-size: 170%; font-weight: 700; line-height: 28px; margin: 0px 0 20px; text-align: center; } .form-control { max-width: auto; margin: 1px; font-weight: 300; color: #6a6a6a; } .form .input-group{ margin-bottom: 15px; } media queries @media screen , (max-width: 767px) { #footer .copyright { text-align: center; } #footer .social { text-align: center; } }
if want have responsive footer, wont want hardcode widths elements inside footer (or footer itself). saw css selector below has width attribute of 280px:
footer-distributed .footer-right form input, .footer-distributed .footer-right form textarea {... width: 280px; ...} i'm led believe property make field stubborn when resizing screen.
since using media queries, trying finding percentage works textarea , input, , adjust percentage on screen resize. way still have breakpoint, dynamic in behavior point.
hope helps. sebastian
Comments
Post a Comment