How to make a mobile responsive column

Question

I have a schedule on my website which consists of two columns. I want it to be 2 columns in desktop devices and 1 column in mobile devices.

.text_demoBlock {
    padding-bottom:20px; 
    width:65%;
    text-align:justify;
    column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-gap: 40px; 
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    column-rule: 1px solid #000; 
    -moz-column-rule: 1px solid #000;
    -webkit-column-rule: 1px solid #000;
    }

  <div class="text_demoBlock">
    <p><b>Time</b></p>
    <p><b>08:55  Time</span>
<br>Time</b>
</p>
<p>09:00 Time</p>
<p>09:30  Time</p>
<p>10:00  Time</p>  
<p>       Time</p>
<p>11:00  Time</p>
<p>11:30  Time</p>
<p>12:00  Time</p>
<p>13:00  Lunch</p>
<p>14.00  Time</p>
<p>14.30  Time</p>
<p> 14.50  
3.  «Why We Love to Hate HR…and What HR Can   Do About It?»</p>
<p>16:00  Time</p>
<p>16:30  Time</p>
<p>17:00  Time</p>
<p>17:30  Time</p>
<p>18:00  Time</p>
<p>18:10  Time</p>
<p>18:15  It’s party time!</p>
  </div>

How can I make it mobile responsive?

try to wrap in 2 divs and width 50% , float left and for mobile width 100% — cyrus, Oct 21 '19 at 04:59

score 2 · Accepted Answer · edited Oct 21 '19 at 05:22

2

All you need to do is add a media query and specify the number of columns you want.

@media only screen and (max-width: 576px) {
  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

edited Oct 21 '19 at 05:22

Ramesh

2,297
2
20
42

answered Oct 21 '19 at 05:17

craft9861

204
2
8

score 2 · Answer 2 · edited Oct 21 '19 at 05:42

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Responsive column</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <div class="row no-gutters m-2">
        <div class="col mr-2">
            <div class="row">
                <div class="col-xl-3"><label class="col-form-label">Select Time</label></div>
                <div class="col d-xl-flex justify-content-xl-center align-items-xl-center"><select style="width: 100%;"><option value="undefined" selected="">Time</option><option value="12">12:00</option><option value="13">1:00</option><option value="14">2:00</option></select></div>
            </div>
        </div>
        <div class="col mr-2">
            <div class="row">
                <div class="col-xl-3"><label class="col-form-label">Select Time</label></div>
                <div class="col d-xl-flex justify-content-xl-center align-items-xl-center"><select style="width: 100%;"><option value="undefined" selected="">Time</option><option value="12">12:00</option><option value="13">1:00</option><option value="14">2:00</option></select></div>
            </div>
        </div>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

score 2 · Answer 3 · answered Oct 22 '19 at 10:04

yo need 3 between distance for mobile sizes now your code can changes to shwon down:

    
//for Extra small phones
@media(max-width:375px){
  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
 } 

//for normal phones
@media(min-width:376px) and (max-width:575px){

  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

//for large mobiles 
@media(min-width:576px) and (max-width:567px) {
  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}

score 1 · Answer 4 · answered Oct 21 '19 at 05:18

1

the CSS @media can be used for hiding elements in the screen width basis. check Example

Div show/hide media query

answered Oct 21 '19 at 05:18

Ravi Makwana

2,782
1
29
41

How to make a mobile responsive column

4 Answers4