Gap between horizontal image and embed video

Question

There is a gap between the image and embedded video.There is no problem in mobile view.

<div class="section"> 
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6"><div class="embed-responsive embed-responsive-16by9"> 

        <img  class="embed-responsive-item" width="600px" height="360" src="images\phone.jpg"/>                                  </div>
      </div>
      <div class="col-sm-6">
        <div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" class="embed-responsive-item" src="https://www.youtube.com/embed/_k4SA"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

Please provide a [**Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve). — Ricky Ruiz, Nov 07 '16 at 05:01
Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Aswin, Nov 08 '16 at 05:12

score 1 · Accepted Answer · answered Nov 07 '16 at 05:16

add class 'nopadding' with col-sm-6 ... That will solve your problem.

<div class="section"> 
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 nopadding"><div class="embed-responsive embed-responsive-16by9"> 

        <img  class="embed-responsive-item" width="600px" height="360" src="images\lenovok5.jpg"/>                                  </div>
      </div>
      <div class="col-sm-6 nopadding">
        <div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" class="embed-responsive-item" src="https://www.youtube.com/embed/_9G7CGbk4SA"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

CSS file add following code :

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Gap between horizontal image and embed video

1 Answers1