TechQA.

The responsiveness do not work when I use a Bootstrap

472 views Asked by At

At the desktop the website looks good but when I try to reduce the screen to small resolutions the element is mixing one with others and looking really bad. For example:

  • Images repeat itself and not steched, as I would expect
  • Text are on a contant possition. I would like the possition to change according to image size.
  • Battons and thier fonts should be smaller when screen size is decreased.

It should look like this : screen shot

Here is my code:

.first-row {
    background-image: url('images/wtb-MapBG.png');
    background-size: cover;
    background-repeat: no-repeat;
    position:relative;
    color: white;
    letter-spacing:2px;
    height: 90vh;
    z-index:0;
}
.inner {
    position:absolute;
    z-index:1;
    background: url('images/wtb-Map.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 65%;
    height: 85vh;
    width:100%;
}


.wtbproduct {
    height: 97vh;
    background: url('images/wtb-Product.png');
    background-position:center center;
    background-size: cover;
    background-repeat: no-repeat;
    }
h2 {
margin-left: 80px;
margin-top: 510px;
}
.secondrowblock {
     height: 97vh;
    }
.text {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    line-height: 1.7;
    height: 97vh;
    margin-left: 90px;
}
.text p, .text1  {
      text-align: left;
      font-weight:400; 
      font-size: 1.4em;
      color:#707070;
      font-size: 28px;
  }
 .btn.btn-default  {
 background: #FFFFFF 64bd45;
 color: #64bd45;
    text-shadow: 0 0px 0 #fff;
    border: 1px solid #64bd45;
    background: white;
    width: 249.75px;
    font-size:130%;
    letter-spacing:1.5px;
    margin-top: 25px;
       }
.wtb-Product-Hands{
    height: 80vh;
    background: url('images/wtb-Product-Hands.png') no-repeat center;
    background-size: cover;
   }
.third-row ,.thirdrowblock7 {
      height:80vh;
  }
  
.logo {
    overflow: hidden;
    height: 10vh;
    width:30%;
    background-position:center center;
    background-repeat: no-repeat;  
}
  .text1 :nth-child(2) {
    font-size: 21px;
    padding-bottom: 45px;
    margin-left: 80px;
}
.text1 :nth-child(1) {
margin-top: 60px;
}
.fourth-roww {
   height:50vh;
   width: 100%;
  
}

.pictureone, .thirdrowblock {
     padding: 0px;     
 }
.panel-heading.longbutton{
   width:90%;
   height: 60px;
   background: #64bd45;
   color: #FFFFFF ;
   display:flex;
   align-items: center;
   justify-content: flex-start;
   font-size: 150%;
   padding-left: 280px;
   margin-bottom: 15px;
   margin-left: 50px;
  
  }
#headingOne {
 margin-top: 15vh;
}
.panel-heading a:after {
font-family: "FontAwesome";
content: "\f068";
font-style: normal;
color: white;
right: 20px;
font-size: 18px;
padding-left: 0.5em;
padding-right: 30px;
float: left;
margin-top: 6px;
font-weight: 10px !important;

}
.panel-heading a.collapsed:after {
font-family: "FontAwesome";
content: "\f067";
float: left;
margin-top: 6px;
}
a {
  color: white !important; 
  text-decoration:none !important;
  outline: none !important;
  }
   .email {
    color:#64bd45 !important;
    padding-top: 15px;
}
.well {
    background: white;
    border:0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    justify-content: center;
    height: 100%;
    margin-top: 10px;
    margin-bottom: -10px;
}
.well p {
      text-align: left;
      font-weight:300; 
      font-size: 1.4em;
      color:#707070;
      font-size: 20px;
}
.well :nth-child(3) {
    letter-spacing:2px;
}
.well  :nth-child(4) {
letter-spacing:1px;    
}
 <body>
      <!--section one--> 
    
       <div class="row first-row img-responsive">
           <div class="col-sm-12 mapBG" >
             <div class="inner">  </div>
             
            </div>
            <h2 class="wheretobuy"> WHERE TO BUY UPRIGHT </h2> 
      </div>
      
      <!--end section one-->

      <!-- section two-->
      <div class="row second-row img-responsive">
          <div class="col-sm-5 col-sm-offset-0 secondrowblock">
             <div class="text">
              <p> Find it all at</p>
              <p> STORE.UPRIGHTPOSE.COM</p>
              <p> Evrything you need to have </p>
              <p>good posture.</p>
              <button class="btn btn-default " type="button" > GO TO STORE</button>
            </div>  
          </div>
        <div class="col-sm-7 col-sm-offset-0 pictureone">
              <div class="wtbproduct"></div>
       </div>
      </div>
      <!-- end section two--> 

      <!-- section three-->
   <div class="row third-row img-responsive">

          <div class="col-sm-7 col-sm-push-5 thirdrowblock7">
              <div class="row text1 center-block">
                <h2> Or look for UPRIGHT at a retailer near you. </h2>
                <h3> Shope in stores or buy online by cliking the logos below: </h3>
              </div>

             <div class="row logos img-responsive center-block">
               <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-amazon.png")'>    </div>
                <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-amazon-de.png")'> </div>
                <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-amazon-uk.png")'> </div>
                <div class="clearfix visible-sm-block"> </div>
               </div>

              <div class="row">
               <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-fancy.png")'> </div>
               <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-Bisly.png")'> </div>
               <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-emag.png")'>  </div>
               <div class="clearfix visible-sm-block"> </div>
              </div> 

             <div class="row">
              <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-logo-newegg.png")'> </div>
              <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-8ta.png")'>         </div>
              <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-searchingC.png")'>  </div>
              <div class="clearfix visible-sm-block"> </div>
             </div>    

            <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-GadgetFlow.png")'>   </div>
             <div class="col-xs-4 col-sm-4 col-md-4 logo" style='background-image:url("images/wtb-HardwareClub.png")'> </div>
           </div>  
         </div>
     </div> 
    
         <div class="col-sm-5 col-md-pull-7 thirdrowblock">
              <div class="wtb-Product-Hands"> </div>
          </div>
 </div>          

         
     <!-- end section two-->
<div class="fourth-roww"> 
    <div class="text-center">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

       <div class="panel-panel-default">
         <div class="panel-heading longbutton" role="tab" id="headingOne">
           <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            BECOME AN UPRIGHT DISTRIBUTOR OR RETAILER
          </a>
        </div>
       <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="well">
         <p> Interested in learning more about how you can become a sales or retail partner of UPRIGHT ?</p>
         <p class="email"> [email us at [email protected]] </p>
      </div>
    </div>
  </div>

  <div class="panel-panel-default">
    <div class="panel-heading longbutton" role="tab" id="headingTwo">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          LEARN MORE ABOUT UPRIGHT AFFILIATE PROGRAM
        </a>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="well">
        <p> Make Good Posture Your Business. </p>
        <p> JOIN THE UPRIGHT AFFILIATE PROGRAM </p>
        <p> Make money and improve lives by directing</p>
        <p> visitors to UPRIGHT products from your site or blog.</p>
        <p class="email">[email us at [email protected]] </p>
      </div>
    </div>
  </div>
 </div>
</div>
<!--end section four--> 

 <script src =  "http://code.jquery.com/jquery-3.1.0.min.js"> </script>
     <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

twitter-bootstrap responsive-design responsiveness
Original Q&A
1

There are 1 answers

5
AudioBubble On

Please use col-xs-9 or col-sm-9 according to your need, this will fix the issue. Please read the Officials Bootstrap Documentation on responsiveness.

Hope this will help you.

Related Questions in TWITTER-BOOTSTRAP

Related Questions in RESPONSIVE-DESIGN

Related Questions in RESPONSIVENESS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions