CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
deepak
deepak

Reputation: 29

Adding responsiveness in my html code using bootstrap

I'm struggling to add responsiveness to a certain section in my webpage using bootstrap.

enter image description here

In the above picture, when window size is anything other than lg in bootstrap (ie: md, sm or xs), I want to display description on top and picture on bottom. The html and css code I have for this code is given below. Can someone help me here?

HTML:

<script>
    var background_img_url = "{{ now_running.render_tactics_pic() }}";
</script>

    <section class="action">
        <div class="container">
            <a href="{{ url_for('.post', id=now_running.id) }}">
                <div class="left-text">
                    <h4>{{ now_running.header }}</h4>
                    <p class="running-post">{{ now_running.body }}</p>
                </div>
                <div id="mainPost" class="right-image">        
                </div>
            </a>    
        </div>
    </section>

CSS code:

.action {
   overflow: visible;
   padding: 0px;
   width: 100;
   height: 400px;
   background: #f2f2f2;
   position: relative;
}

.action .left-text {
   padding: 70px 0;
   padding-right: 60px;
   width: 50%;
}
.action .left-text h4 {
   text-transform: uppercase;
   font-size: 24px;
   font-weight: 600;
   letter-spacing: 1px;
}
.action .left-text p {
   padding-top: 20px;
}
.action .left-text em {
   font-size: 16px;
   color: #aaa;
   font-weight: 300;
   font-style: normal;
}
.action .right-image {
   position: absolute;
   top: 0;
   right: 0;
   width: 50%;
   height: 100%;
   background-size: cover;
   background-position: 0 0;
   background-repeat: no-repeat;
}

JS code:

$(function() {
   console.log("Right here");
   $('.action .right-image').css('background-image', 'url(' + background_img_url + ')');
});

Upvotes: 1

Views: 86

Answers (1)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Just add this to your HTML and it will be responsive.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="action">
  <div class="container">
   <div class="row">
    <div class="col-lg-6">
      <h4>Header</h4>
      <p class="running-post">In the above picture, when window size is anything other than lg in bootstrap (ie: md, sm or xs), I want to display description on top and picture on bottom. The html and css code I have for this code is given below. Can someone help me here?</p>
    </div>
    <div id="mainPost" class="right-image col-lg-6">
      <img class="img-responsive" src="https://www.thesun.co.uk/wp-content/uploads/2017/01/nintchdbpict000292801126.jpg?strip=all&w=960" />
    </div>
   </div>
  </div>
</section>

You need something like this???

Upvotes: 2

Related Questions