Instructions List with Images

Change the ordered list to count on text instead of image.

by Virtual

HTML

<p><strong>How to Attach a Mini QD Loop to your Camera</strong></p>
<ol class="instr">
  <li><img src="//optechusasite.s3.amazonaws.com/images/instructions/connections/qd/connection1.jpg" alt="Instructional photo for attaching Mini QD loop to camera" />
    <p>Thread small cord loop through connection point on camera.</p>
  </li>
  <li><img src="//optechusasite.s3.amazonaws.com/images/instructions/connections/qd/connection2.jpg" alt="Instructional photo for attaching Mini QD loop to camera" />
    <p>Thread mini quick disconnect through opening of loop. </p>
  </li>
  <li><img src="//optechusasite.s3.amazonaws.com/images/instructions/connections/qd/connection3.jpg" alt="Instructional photo for attaching Mini QD loop to camera" />
    <p>Pull mini quick disconnect to tighten knot.</p>
  </li>
</ol>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ol.instr,
ul.instr {
  margin-left: 0;
  padding-left: 0;
}

.instr:after,
.instr:before {
  content: " ";
  display: table;
}

.instr:after {
  clear: both;
}

.instr li {
  width: 50%;
  display: inline-block;
  float: left;
  margin-left: 0;
  font-size: 1rem;
  padding-right: 25px;
}

ol.instr li p {
  list-style-type: decimal;
  display: list-item;
  margin-left: 15px;
}

.instr img {
  border: 1px solid #ccc;
  padding: 3px;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .instr li {
    width: 25%;
  }