Cannot make html page responsive using bootstrap

Question

I am trying to make two sections called, get started and about us responsive, and I am a beginner at using bootstrap so I am making some mistakes.

I tried to make the get started section work, but the buttons are not responsive at all. The about us section, I used 2 images for laptop and cellphone but even that is creating some problems as the margin doesn't stay the same for picture and image, so need help.

HTML Code:

   <section class="cont_1">
  <div class="container">
    <h2>Get started!</h2>
    <div class="row">
      <div class="col-md-7">
        <p>Now that you now the process it's time to check out recent offer.
          it only take 5 min to get ypur loan or invest</p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-xs-6 col-md-2 borrow"> <a href="#">Borrow</a> </div>
      <div class="col-xs-6 col-md-2 borrow"> <a style="background-color:#fff; color:#66cccc; border: 1px solid #66cccc;" href="#">invest</a> </div>
    </div>
  </div>
</section>

    <section class="about">
  <div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="about_tx">
        <h4>About Us</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>
    </div>
    <div class="col-md-6"> <img src="img/corporate3.jpg"> </div>
    </div>
  </div>
  <div class="about_tx"> <img src="img/corporate3.jpg"> </div>
</section>

CSS:

    .cont_1 {
    float: left;
    width: 100%;
    color: #676767;
    padding: 82px 0px;
    border-bottom: 2px solid #eeeeee;
    border-top: 2px solid #eeeeee;
}
.cont_1 h2 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 25px;
    font-weight: 600;
}
.cont_1 .col-md-7 p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 23px;
}
/*.cont_1 .col-md-2 a{font-family: 'Lato', Helvetica, Arial, sans-serif; font-size:28px;background:#66cccc; color:#FFF;padding:14px 30px 17px 37px; display:block; margin-bottom:10px;}
.cont_1 .col-md-2:last-child a {background: #fff; border: 1px solid #66cccc; color: #66cccc; display:block;}*/

.cont_1 .col-md-2 a {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 28px;
    background: #66cccc;
    color: #FFF;
    padding: 6px 40px;
    float: left;
    margin-bottom: 10px;
    text-transform: capitalize;
    border: 1px solid #fff;
}
.cont_1 .col-md-2 a:hover {
    background: #fff;
    border: 1px solid #66cccc;
    color: #66cccc;
}

/******************************
*******************************
*********ABOUT US***************
*******************************
******************************/

.about {
    float: left;
    position: relative;
    width: 100%;
}
.about_tx {
    width: 100%;
    float: left;
    text-align: left;
    margin-bottom: 25px;
}
.about_tx h4 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 25px;
    color: #666;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 35px;
}
.about_tx p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #666;
    font-weight: 400;
    margin: 0;
}
.about_tx img {
    width: 100%;
    height:80%;
    float: left;
}
.about_tx img:last-child {
    margin-top: 113px;
}
.about img {
    bottom: 0;
    position: absolute;
    right: 0;
    width: 49%;
}
.about .col-md-6 img {
    display: none;
}

/******************************
*******************************
*********RESPONSIVE DIV********
*******************************
******************************/

@media only screen and (max-width: 1024px) {

    .borrow {
        width: auto;
        padding: 0;
    }

}
@media only screen and (max-width: 992px) {
    .about img {
        display: none;
    }
    .about .col-md-6 img {
        display: block;
        float: left;
        position: relative;
        width: 100%;
    }

}
@media only screen and (max-width: 980px) {
    .col-md-2 > a {
        display: block;
        margin: 0 10px 0 0;
    }
}
@media only screen and (max-width: 768px) {

    .copy_tx p {
        text-align: center;
    }
    .sm {
        text-align: center;
    }
}
@media only screen and (max-width: 480px) {

}
@media only screen and (max-width: 320px) {
    .cont_1 .col-md-2 a {
        padding: 6px 25px;
    }
}

If there is a very easy way of making it responsive with just bootstrap classes please do help me out, and is it possible using just one image and making it responsive for about us? And the files are also attached if you want to take a look at it.File

can you add code in jsfiddle?

Harsh Sanghani
– Harsh Sanghani

2015-12-31 08:36:03 +00:00
Commented Dec 31, 2015 at 8:36 — Harsh Sanghani
– Harsh Sanghani, Commented Dec 31, 2015 at 8:36
@HarshSanghani I added the file at top for download

XAF
– XAF

2015-12-31 08:43:52 +00:00
Commented Dec 31, 2015 at 8:43 — XAF
– XAF, Commented Dec 31, 2015 at 8:43

Nirman · Accepted Answer · 2015-12-31 08:40:52Z

1

Try replacing your section (cont_1) by below:

<section class="cont_1">
  <div class="container">
    <h2>Get started!</h2>
    <div class="row">
    <div class="col-md-12">
      <div class="col-md-7">
        <p>Now that you now the process it's time to check out recent offer.
          it only take 5 min to get ypur loan or invest</p>
      </div>
      <div class="col-md-2 borrow"> <a href="#">Borrow</a> </div>
      <div class="col-md-2 borrow"> <a style="background-color:#fff; color:#66cccc; border: 1px solid #66cccc;" href="#">invest</a> </div>  
    </div>
    </div>
  </div>
</section>

answered Dec 31, 2015 at 8:40

Nirman

6,83322 gold badges82 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

XAF Over a year ago

Do I change anything on the CSS? since that will affect it

XAF Over a year ago

I tried it, but the buttons still close up, only way to do it is put a margin right but then that makes it huge margin on the cellphone view.

Nirman Over a year ago

you don't need to change anything at css level.. "button still close up" means? do you want the buttons to be displayed in same width in cellphone?

XAF Over a year ago

when I start re sizing the screen, the buttons attach together, you can check in the file I uploaded, I need space between the buttons when I go from laptop to tablet screen..

Nirman Over a year ago

try using "btn" css class in your <a> links for Borrow and Invest... "btn" is a bootstrap class for styling the buttons

|

Collectives™ on Stack Overflow

Cannot make html page responsive using bootstrap

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related