css - Chevron - Problems with the responsive behaviour and input field disabled on it -
i have following component:
the problem had fix height , big problem when want resize windows. , in same time i'm not able use input fields inserted in div.
here code:
css:
#chevron { position: relative; padding: 12px; margin-bottom: 6px; height: 100%; z-index:-1; } #chevron:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: #f7f7f7; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); z-index: -1; } #chevron:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: #f7f7f7; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); z-index: -1; }
html
<div class="row" id="chevron" style="margin-top: 40px; height: 700px;"> <div class="row" style="margin-top: 40px;"> <div class="col-sm-4 col-sm-offset-5"> <div class="col-sm-1"> <div id="circles"> 1 </div> </div> <div class="col-sm-11" style="vertical-align:top;"> <h2>maak je pakje klaar</h2> </div> </div> </div> <div class="row" id="" style="padding-top:20px;"> <div class="col-sm-10 col-sm-offset-2"> <div class="col-sm-5"> <div class="row"> <div class="col-sm-4"> <img src="../assets/img/sendingparcel/imgmaak.png" class="img-responsive"> </div> <div class="col-sm-7"> <p> <h3>verpak je zending</h3><br> zorg zelf voor een stevige doos of vind het juiste formaat bij bpost <br><br><a href="#"> ontdek alle dozen in onze eshop</a><a href="#"><br>ontdek het aanbod in je postkantoor of postpunt </a> </p> </div> </div> </div> <div class="col-sm-5"> <div class="row"> <div class="col-sm-4"> <img src="../assets/img/sendingparcel/package.png" class="img-responsive"> </div> <div class="col-sm-7"> <p><h3>weeg en meet je pakje en vermijd zo een weigering</h3><br> vanaf een dikte van 3 cm spreken on een pakje.<br> ontdek alle dozen in onze eshop<br>een pakje mag maximaal 30 kg wegen. </a> </p> </div> </div> <div class="row"> <br><p class="footnote" style="margin-left:30px;">controleer ook het formaat. een pakje moet minimaal 145 mm x 112 mm <br>en mag maximaal 1,5 m lang zijn. de totale oppervlakte niet meer dan 3 meter: <br>lengte + 2 keer de breedte + 2 keer de hoogte. </p> </div> </div> </div><!-- col-sm-10 --> </div> <!-- row --> </div>
Comments
Post a Comment