如何使我在 jumbotron 中的包装类响应？我是新手

Question

I am making the wrapper class responsive but coulnot able to do it. I have searched answers all around but could not get any positive help hope to find solution here:

 .jumbotron { overflow: hidden; background-color:whitesmoke; opacity:1.0; } .goodat{ color: #ffc107; text-align:center; } .goodat:hover{ color:#F64672; } .wrapper { margin: 40px auto; width: 2500px; height: 500px; } .wrapper::before, .wrapper::after { content: ""; display: table; clear: both; } .wrapper .panel { position: relative; margin: 50px 20px; padding: 0 20px 20px; overflow: hidden; float: left; width: 270px; height: 450px; text-align: center; background: #F1F1F1; border: 1px solid #30bb57; box-sizing: border-box; transition: border 200ms ease; cursor: pointer; } .wrapper .panel img { display: block; margin: 20px auto; text-align: center; } .wrapper .panel h3 { display: block; margin-bottom: 15px; color: #30bb57; font-size: 18px; font-weight: 700; text-align: center; text-shadow: 0 2px 1px #FFF; } .wrapper .panel p { font-size: 14px; text-shadow: 0 1px 1px #FFF; } .wrapper .panel .slide { position: absolute; bottom: -450px; left: 0; z-index: 100; padding: 20px; height: 100%; width: 100%; text-align: left; background: rgba(1, 61, 71, 0.95); opacity: 60%; box-sizing: border-box; transition: all 300ms ease-in-out; } .wrapper .panel .slide h4 { margin-bottom: 7px; text-align: left; text-shadow: none; font-size: 18px; font-weight: 600; color: #39cc62; } .wrapper .panel .slide ul li { padding: 5px 5px 5px 8px; line-height: 24px; font-size: 13px; color: #F0F0F0; border-bottom: 1px solid #3e737b; } .wrapper .panel .slide ul li:last-child { border: 0; } .wrapper .panel .slide ul li .fa { padding-right: 5px; color: #39cc62; } .panel:hover { border: 1px solid #30bb57; } .panel:hover .slide { bottom: 0; cursor: pointer; } .animated { animation-duration: 500ms; animation-fill-mode: both; animation-delay: 0.5s; } @keyframes slideInDown { 0% { -webkit-transform: translateY(-120%); -ms-transform: translateY(-120%); transform: translateY(-120%); visibility: visible; } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; }

 <div class="jumbotron jumbotron-fluid"> <div class="goodat"> <i><h2>We Are Good At</h2></i> </div> <div class="wrapper"> <div class="panel animated slideInDown"><br> <i class="fa fa-pencil" aria-hidden="true"></i><br><br> <h3>Graphic Design</h3> <p>Stand out from the competition,strength your brand with the help of softechux. Softechux aims to provide unique graphics for your business. Contact us today for free consultation form our creative team.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i>Corporate Design </li> <li><i class="fa fa-check"></i>Banner Design</li> <li><i class="fa fa-check"></i>Advertising Design</li> <li><i class="fa fa-check"></i>Android App UI/UX Design</li> <li><i class="fa fa-check"></i>Ios App UI/UX Design</li> <li><i class="fa fa-check"></i> Web Design</li> <li><i class="fa fa-check"></i>Book Cover Design</li> <li><i class="fa fa-check"></i> eCommerce Solutions</li> </ul> </div> </div> <div class="panel animated slideInDown"><br> <i class="fa fa-industry" aria-hidden="true"></i><br><br> <h3>Industry</h3> <p>Whether you have a real state business or saloon shop, Softechux has solutions for all. We build websites for all Industries.One stop solution for all.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i>Real Estate Website Designing</li> <li><i class="fa fa-check"></i> Locksmith Website Designing</li> <li><i class="fa fa-check"></i>Artist Website Designing</li> <li><i class="fa fa-check"></i>Construction Companies Website Designing</li> <li><i class="fa fa-check"></i>Salon Website Designing</li> <li><i class="fa fa-check"></i>Law Website Designing</li> <li><i class="fa fa-check"></i>Firm Website Development</li> <li><i class="fa fa-check"></i>Medical Website Development </li> <li><i class="fa fa-check"></i>Educational Website Development </li> <li><i class="fa fa-check"></i>Fashion Website Development </li> </ul> </div> </div> <div class="panel animated slideInDown"><br> <i class="fa fa-shopping-cart" aria-hidden="true"></i><br><br> <h3>E-commerce</h3> <p>Whether you are a startup,a coffee shop,or a industrial business,everyone dreams of running there online store.We can help turn dream into reality. We work with all famous ecommerce platforms Woocommerce, Magento, Shopify, Laravel, Open Cart, CS Cart.Contact us today for free consultation form our qualified team.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i>Woocommerce</li> <li><i class="fa fa-check"></i>Magneto</li> <li><i class="fa fa-check"></i>Shopify</li> <li><i class="fa fa-check"></i>Laravel</li> <li><i class="fa fa-check"></i>Open Cart</li> <li><i class="fa fa-check"></i>Cs Cart</li> <li><i class="fa fa-check"></i>BigCartel</li> <li><i class="fa fa-check"></i>Volusion</li> <li><i></i>And Many More...</li> </ul> </div> </div> <div class="panel animated slideInDown"><br> <i class="fa fa-magic" aria-hidden="true"></i><br><br> <h3>SEO</h3> <p>With over 200 factors in play within Google's search algorithm,we at Softechux have build a advanced seo strategy which focuses on results, we track conversion so you know how Softechux is creating values.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i> Analytics </li> <li><i class="fa fa-check"></i> Active Search</li> <li><i class="fa fa-check"></i> Code Optimization</li> <li><i class="fa fa-check"></i> Link Building</li> <li><i class="fa fa-check"></i> On Page Seo</li> <li><i class="fa fa-check"></i> Off Page Seo</li> <li><i class="fa fa-check"></i> Pay Per Click Optimization</li> <li><i class="fa fa-check"></i> Local SEO</li> </ul> </div> </div> </div> </div>

I am not getting any error messages but i was unable to modify and get resilts i have tried multiple properties of css toget result but wasnot able to do it.

Answer 1

instead use this CSS code for the wrapper instead:

       .wrapper {
       overflow-wrap: break-word; 
       width: 90%;
       margin: auto;
       height: 500px;
     }

setting a width to a percentage allows the pages to respond according to the windows viewport size.

the overflow wrap will properly-wrap text that cuts off due to size.

Answer 2

Is this what you are looking for. I have changed your wrapper width to 'max-width' instead of 'width', and you can style media query as per your need according to screens.

 .jumbotron { overflow: hidden; background-color:whitesmoke; opacity:1.0; } .goodat{ color: #ffc107; text-align:center; } .goodat:hover{ color:#F64672; } .wrapper { margin: 40px auto; max-width: 2500px; height: 500px; } .wrapper::before, .wrapper::after { content: ""; display: table; clear: both; } .wrapper .panel { position: relative; margin: 50px 20px; padding: 0 20px 20px; overflow: hidden; float: left; width: 270px; height: 450px; text-align: center; background: #F1F1F1; border: 1px solid #30bb57; box-sizing: border-box; transition: border 200ms ease; cursor: pointer; } .wrapper .panel img { display: block; margin: 20px auto; text-align: center; } .wrapper .panel h3 { display: block; margin-bottom: 15px; color: #30bb57; font-size: 18px; font-weight: 700; text-align: center; text-shadow: 0 2px 1px #FFF; } .wrapper .panel p { font-size: 14px; text-shadow: 0 1px 1px #FFF; } .wrapper .panel .slide { position: absolute; bottom: -450px; left: 0; z-index: 100; padding: 20px; height: 100%; width: 100%; text-align: left; background: rgba(1, 61, 71, 0.95); opacity: 60%; box-sizing: border-box; transition: all 300ms ease-in-out; } .wrapper .panel .slide h4 { margin-bottom: 7px; text-align: left; text-shadow: none; font-size: 18px; font-weight: 600; color: #39cc62; } .wrapper .panel .slide ul li { padding: 5px 5px 5px 8px; line-height: 24px; font-size: 13px; color: #F0F0F0; border-bottom: 1px solid #3e737b; } .wrapper .panel .slide ul li:last-child { border: 0; } .wrapper .panel .slide ul li .fa { padding-right: 5px; color: #39cc62; } .panel:hover { border: 1px solid #30bb57; } .panel:hover .slide { bottom: 0; cursor: pointer; } .animated { animation-duration: 500ms; animation-fill-mode: both; animation-delay: 0.5s; } @keyframes slideInDown { 0% { -webkit-transform: translateY(-120%); -ms-transform: translateY(-120%); transform: translateY(-120%); visibility: visible; } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @media (max-width:767px){ .wrapper .panel{ width:100%; margin:0 0 25px 0; } }

 <div class="jumbotron jumbotron-fluid"> <div class="goodat"> <i><h2>We Are Good At</h2></i> </div> <div class="wrapper"> <div class="panel animated slideInDown"><br> <i class="fa fa-pencil" aria-hidden="true"></i><br><br> <h3>Graphic Design</h3> <p>Stand out from the competition,strength your brand with the help of softechux. Softechux aims to provide unique graphics for your business. Contact us today for free consultation form our creative team.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i>Corporate Design </li> <li><i class="fa fa-check"></i>Banner Design</li> <li><i class="fa fa-check"></i>Advertising Design</li> <li><i class="fa fa-check"></i>Android App UI/UX Design</li> <li><i class="fa fa-check"></i>Ios App UI/UX Design</li> <li><i class="fa fa-check"></i> Web Design</li> <li><i class="fa fa-check"></i>Book Cover Design</li> <li><i class="fa fa-check"></i> eCommerce Solutions</li> </ul> </div> </div> <div class="panel animated slideInDown"><br> <i class="fa fa-industry" aria-hidden="true"></i><br><br> <h3>Industry</h3> <p>Whether you have a real state business or saloon shop, Softechux has solutions for all. We build websites for all Industries.One stop solution for all.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i>Real Estate Website Designing</li> <li><i class="fa fa-check"></i> Locksmith Website Designing</li> <li><i class="fa fa-check"></i>Artist Website Designing</li> <li><i class="fa fa-check"></i>Construction Companies Website Designing</li> <li><i class="fa fa-check"></i>Salon Website Designing</li> <li><i class="fa fa-check"></i>Law Website Designing</li> <li><i class="fa fa-check"></i>Firm Website Development</li> <li><i class="fa fa-check"></i>Medical Website Development </li> <li><i class="fa fa-check"></i>Educational Website Development </li> <li><i class="fa fa-check"></i>Fashion Website Development </li> </ul> </div> </div> <div class="panel animated slideInDown"><br> <i class="fa fa-shopping-cart" aria-hidden="true"></i><br><br> <h3>E-commerce</h3> <p>Whether you are a startup,a coffee shop,or a industrial business,everyone dreams of running there online store.We can help turn dream into reality. We work with all famous ecommerce platforms Woocommerce, Magento, Shopify, Laravel, Open Cart, CS Cart.Contact us today for free consultation form our qualified team.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i>Woocommerce</li> <li><i class="fa fa-check"></i>Magneto</li> <li><i class="fa fa-check"></i>Shopify</li> <li><i class="fa fa-check"></i>Laravel</li> <li><i class="fa fa-check"></i>Open Cart</li> <li><i class="fa fa-check"></i>Cs Cart</li> <li><i class="fa fa-check"></i>BigCartel</li> <li><i class="fa fa-check"></i>Volusion</li> <li><i></i>And Many More...</li> </ul> </div> </div> <div class="panel animated slideInDown"><br> <i class="fa fa-magic" aria-hidden="true"></i><br><br> <h3>SEO</h3> <p>With over 200 factors in play within Google's search algorithm,we at Softechux have build a advanced seo strategy which focuses on results, we track conversion so you know how Softechux is creating values.</p> <div class="slide"> <h4>Services</h4> <ul> <li><i class="fa fa-check"></i> Analytics </li> <li><i class="fa fa-check"></i> Active Search</li> <li><i class="fa fa-check"></i> Code Optimization</li> <li><i class="fa fa-check"></i> Link Building</li> <li><i class="fa fa-check"></i> On Page Seo</li> <li><i class="fa fa-check"></i> Off Page Seo</li> <li><i class="fa fa-check"></i> Pay Per Click Optimization</li> <li><i class="fa fa-check"></i> Local SEO</li> </ul> </div> </div> </div> </div>