CODEWITHSUNDEEP
htmlhtml-table
Krystel_T
Krystel_T

Reputation: 101

How to make a responsive horizontal rule

I'm trying to adapt this hr so that it can appear on mobile on one line. This code is fine for a desktop view but for a mobile device it creates a jump to the line that breaks the hr.

div {
  text-align: center;
}

hr {
  display: inline-block;
  width: 30%;
}
<div class="mcnTextContent">
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
  <div style="center">
    <hr>TOGETHER
    <hr>
  </div>
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Views: 1818

Answers (2)

MikeB
MikeB

Reputation: 623

Your estimate of 20px for the width of TOGETHER was way out. Below I have used 8em but you may want to adjust that a little one way or the other.

div { text-align: center; } 
hr { display: inline-block; width: calc((100% - 8em)/2); }
<div class="mcnTextContent">
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
  <div style="center">
    <hr>TOGETHER
    <hr>
  </div>
  <table>
    <tbody>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

MikeB
MikeB

Reputation: 623

Option One: Use a single, full-width (or maybe something like 90%?) <HR> but move TOGETHER up so that it sits on top.

Option Two: Use calc in your CSS so that the width of each <HR> is (width of parent - width of TOGETHER) / 2

(Guessing at 30% width is just too fragile in this case).

Upvotes: 0

Related Questions