Twitter Bootstrap Question posted in

how to make equal height columns-Twitter bootstrap

**

.img-responsive {
            width: 100%;
        }
        .content div[class^=col] {
            padding: 0;
        }
        .content .row {
            border: 1px solid #333;
            margin: 0;
            text-align: left;
        }
        .content div[class^=col]:first-child {
            padding: 0;
        }
        .content div[class^=col]:nth-child(2) {
            text-align: center;
            margin: 50px 0;
        }
        .main-tag {
            color: #fb6e6a;
            letter-spacing: 0.8px;
        }
        .content header .main-tag .fa {
            color: #fb6e6a;
        }
        .content div[class^=col]:nth-child(2) h3 {
            font-size: 1.5em;
            font-weight: 600;
            font-family: 'Ubuntu', sans-serif;
        }
        .content .vr-line {
            border-color: #333;
        }
        .content .fa {
            color: #333;
        }
        .content footer p {
            margin-top: 50px;
        }
        .content footer p .fa {
            font-size: 1.3em;
            padding-right: 0.5em;
            line-height: 1px;
        }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <img src="https://preview.ibb.co/fPv2fy/1st_blog.jpg" class="img-responsive" alt="blog-img">
                </div>
                <div class="col-sm-6">
                    <article>
                        <header>
                            <p class="main-tag">Seasons <i class="fa fa-circle-o"></i> Style</p>
                            <h3>BEST SWEATER FOR AUTUMN</h3>
                            <p>by Marina <span class="vr-line"></span> July 8, 2017</p>
                        </header>
                        <section>
                            <p>Lommodo ligula eget dolor. Aenean massa. Cum sociis que penatibus et magnis dis parturient montes lorem, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla…</p>
                        </section>
                        <footer>
                            <p><span><i class="fa fa-heart-o"></i><i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google-plus"></i><i class="fa fa-pinterest"></i></span>
                            </p>
                        </footer>
                    </article>
                </div>
            </div>
        </div>
    </div>

**In responsive mode image height is not equal to other div i try to much but i don’t get any solution.
In responsive mode image height is not equal to other div i try to much but i don’t get any solution.In responsive mode image height is not equal to other div i try to much but i don’t get any solution.

Tags:

2

Answers


  1. 0

    Got this working fine with adding a media query to the css sheet.

    Try this media Query for medium resolution:

     .img-responsive {
  width: 100%;
}

.content div[class^=col] {
  padding: 0;
}

.content .row {
  border: 1px solid #333;
  margin: 0;
  text-align: left;
}

.content div[class^=col]:first-child {
  padding: 0;
}

.content div[class^=col]:nth-child(2) {
  text-align: center;
  margin: 50px 0;
}

.main-tag {
  color: #fb6e6a;
  letter-spacing: 0.8px;
}

.content header .main-tag .fa {
  color: #fb6e6a;
}

.content div[class^=col]:nth-child(2) h3 {
  font-size: 1.5em;
  font-weight: 600;
  font-family: 'Ubuntu', sans-serif;
}

.content .vr-line {
  border-color: #333;
}

.content .fa {
  color: #333;
}

.content footer p {
  margin-top: 50px;
}

.content footer p .fa {
  font-size: 1.3em;
  padding-right: 0.5em;
  line-height: 1px;
}

@media screen and (max-width: 1000px) and (min-width: 410px) {


.content div[class^=col] {
  padding: 0;
}

.content .row {
  border: 1px solid #333;
  margin: 0;
  text-align: left;
}

.content div[class^=col]:first-child {
  padding: 0;
}

.content div[class^=col]:nth-child(2) {
  text-align: center;
  margin: 0px;
}

.main-tag {
  color: #fb6e6a;
  letter-spacing: 0.8px;
}

.content header .main-tag .fa {
  color: #fb6e6a;
}

.content div[class^=col]:nth-child(2) h3 {
  font-size: 1.5em;
  font-weight: 600;
  font-family: 'Ubuntu', sans-serif;
}

.content .vr-line {
  border-color: #333;
}

.content .fa {
  color: #333;
}

.content footer p {
  margin-top: 0px;
}

.content footer p .fa {
  font-size: 1.3em;
  padding-right: 0.5em;
  line-height: 1px;
}

}
    Login or Signup to reply.
  2. 0

    I guess this answer will help you to solve the problem.

    .img-responsive {
            width: 100%;
        }
        .content div[class^=col] {
            padding: 0;
        }
        .content .row {
            border: 1px solid #333;
            margin: 0;
            text-align: left;
        }
        .content div[class^=col]:first-child {
            padding: 0;
        }
        .content div[class^=col]:nth-child(2) {
            text-align: center;
            margin: 50px 0;
        }
        .main-tag {
            color: #fb6e6a;
            letter-spacing: 0.8px;
        }
        .content header .main-tag .fa {
            color: #fb6e6a;
        }
        .content div[class^=col]:nth-child(2) h3 {
            font-size: 1.5em;
            font-weight: 600;
            font-family: 'Ubuntu', sans-serif;
        }
        .content .vr-line {
            border-color: #333;
        }
        .content .fa {
            color: #333;
        }
        .content footer p {
            margin-top: 50px;
        }
        .content footer p .fa {
            font-size: 1.3em;
            padding-right: 0.5em;
            line-height: 1px;
        }
        @media screen and (min-width: 768px){
        .image-height{
            position: relative;
            display: flex;
        }    
        img.image-section {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
      }
      @media screen and (max-width: 767px){
        img.image-section {
           width: 100%;
          }
      }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
        <div class="container">
            <div class="row">
                <div class="image-height">
                    <div class="col-sm-6">
                        <img src="https://preview.ibb.co/fPv2fy/1st_blog.jpg" class="image-section" alt="blog-img">
                    </div>
                    <div class="col-sm-6">
                        <article>
                            <header>
                                <p class="main-tag">Seasons <i class="fa fa-circle-o"></i> Style</p>
                                <h3>BEST SWEATER FOR AUTUMN</h3>
                                <p>by Marina <span class="vr-line"></span> July 8, 2017</p>
                            </header>
                            <section>
                                <p>Lommodo ligula eget dolor. Aenean massa. Cum sociis que penatibus et magnis dis parturient montes lorem, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla…</p>
                            </section>
                            <footer>
                                <p><span><i class="fa fa-heart-o"></i><i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google-plus"></i><i class="fa fa-pinterest"></i></span>
                                </p>
                            </footer>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search