How do I change <hr/> tags to vertical lines on larger screens?-CodePudding

How do I change these <hr/> tags to vertical lines automatically when page width increase to allow three columns? On small devices, they properly separate rows. I'm using Bootstrap v4.

    <div >
        <div >
            <h2>Have a Question?</h2>
        </div>
        <div >
            <hr/>
            <h3>FAQs</h3>
            <p>Get more information about ordering, payments and product delivery.</p>
        </div>
        <div >
            <hr />
            <h3 >Call Us</h3>
            <p>Contact our product specialists</p>
        </div>
    </div>

CodePudding user response：

try this using media query to hid the hr and then just add a left border, change the min-width: 600px to match the screen size you are targeting

test here on jsfiddle

@media only screen and (min-width: 600px) {
  hr {
    display: block;
    visibility: hidden;
  }
  div.p-4 {
    display: block;
    border-right: 1px solid #C8C9CA;
  }
  
  div.p-4:last-child {
    border-right: none;
  }
}

<!-- just added bootstrap for testing - CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div >
    <div >
        <h2>Have a Question?</h2>
    </div>
    <div >
        <hr/>
        <h3>FAQs</h3>
        <p>Get more information about ordering, payments and product delivery.</p>
    </div>
    <div >
        <hr />
        <h3 >Call Us</h3>
        <p>Contact our product specialists</p>
    </div>
</div>

CodePudding user response：

Because there is no vertical-rule element this makes it tough because the only option would be to use transform: rotate(90deg);. However, this doesn't satisfy the positioning of the dividers.

Instead, use a border with padding to position the dividers.

@media only screen and (min-width: 767px) {
  hr {
    display: none;
  }
  .col-md-4 {
    border-right: solid 2px #ebebeb;
  }
}


/* 767px is bootstraps sm breaking point */

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <div >
    <h2>Have a Question?</h2>
  </div>
  <div >
    <hr/>
    <h3>FAQs</h3>
    <p>Get more information about ordering, payments and product delivery.</p>
  </div>
  <div >
    <hr />
    <h3 >Call Us</h3>
    <p>Contact our product specialists</p>
  </div>
</div>