3 column table on a desktop browser to 1 column on a mobile-CodePudding

I've currently got a 3-column table, which shows quite well in a desktop browser - until the cell text becomes a little too long or the browser window is too narrow. That's when it starts looking a little weird. This is currently what I'm using:

CSS:

/* Start tour stats 3 column box */
.tour-stats {
    float: left;
    width: 100%;
    margin-bottom: 24px;
    box-sizing: border-box; border-left: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
    background: #daeaf2;
}
.tour-stats .stat {
    float: left;
    width: 33.3%;
    box-sizing: border-box; padding-left: 50px;
    font-size: 0.9em;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #ccc; border-right: 1px dotted #ccc;
}
.tour-stats .stat.distance {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/distance.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.start {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/startflag.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.stop {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/stop.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.time {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/time.png') no-repeat 15px center transparent;
    background-size: 23px 23px;
}
.tour-stats .stat.avg-speed {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/avgspeed.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.tot-distance {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/totaldistance.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}

<div >
    <div >Corowa (08:12)</div>                    
    <div >128.21 km</div>                  
    <div >20.6</div>
    
    <div >Shepparton (16:38)</div>                 
    <div >6:13:57</div>
    <div >573.40 km*</div>
</div>

Any help would be useful! Stephen.

CodePudding user response：

There are better ways, but in your existing example you can just add a media query where you reset the floats and set the width to 100% for your "cells", like this:

@media (max-width: 800px) {
.tour-stats .stat {
    float: none;
    width: 100%;
    }
}

Note: I used 800px max-width here to immediately show the result in the snippet window here. But usually you'd use a smaller value , like 600px.

/* Start tour stats 3 column box */
.tour-stats {
    float: left;
    width: 100%;
    margin-bottom: 24px;
    box-sizing: border-box; border-left: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
    background: #daeaf2;
}
.tour-stats .stat {
    float: left;
    width: 33.3%;
    box-sizing: border-box; padding-left: 50px;
    font-size: 0.9em;
    font-weight: bold;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dotted #ccc; border-right: 1px dotted #ccc;
}
.tour-stats .stat.distance {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/distance.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.start {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/startflag.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.stop {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/stop.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.time {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/time.png') no-repeat 15px center transparent;
    background-size: 23px 23px;
}
.tour-stats .stat.avg-speed {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/avgspeed.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
.tour-stats .stat.tot-distance {
    background: url('https://www.rtw.bike/wp-content/icons/tour-stats/totaldistance.png') no-repeat 15px center transparent;
    background-size: 25px 25px;
}
@media (max-width: 800px) {
.tour-stats .stat {
    float: none;
    width: 100%;
    }
}

<div >
    <div >Corowa (08:12)</div>                    
    <div >128.21 km</div>                  
    <div >20.6</div>
    
    <div >Shepparton (16:38)</div>                 
    <div >6:13:57</div>
    <div >573.40 km*</div>
</div>

CodePudding user response：

You can change the width depending on the screen size using media queries (MDN)

div{
  width:100%;
  height:50px;
  outline: 1px solid black;
  float:left;
}

@media (min-width: 900px) {
  div {
    width:calc(100% / 3);
  }
}

<div></div>
<div></div>
<div></div>

CodePudding user response：

Here you go...

This might be a little bit advanced for you, but I suggest you to start learning Bootstrap 5. It's very easy to make responsive HTML using Bootstrap’s grid system.

See the snippet below.

/* Start tour stats 3 column box */

.tour-stats {
  float: left;
  width: 100%;
  background: #daeaf2;
}

.tour-stats .stat {
  float: left;
  box-sizing: border-box;
  padding-left: 50px;
  font-size: 0.9em;
  font-weight: bold;
  padding-top: 12px;
  padding-bottom: 12px;
}

.col-md-4 {
  border: 1px dotted #ccc;
}

.tour-stats .stat.distance {
  background: url('https://www.rtw.bike/wp-content/icons/tour-stats/distance.png') no-repeat 15px center transparent;
  background-size: 25px 25px;
}

.tour-stats .stat.start {
  background: url('https://www.rtw.bike/wp-content/icons/tour-stats/startflag.png') no-repeat 15px center transparent;
  background-size: 25px 25px;
}

.tour-stats .stat.stop {
  background: url('https://www.rtw.bike/wp-content/icons/tour-stats/stop.png') no-repeat 15px center transparent;
  background-size: 25px 25px;
}

.tour-stats .stat.time {
  background: url('https://www.rtw.bike/wp-content/icons/tour-stats/time.png') no-repeat 15px center transparent;
  background-size: 23px 23px;
}

.tour-stats .stat.avg-speed {
  background: url('https://www.rtw.bike/wp-content/icons/tour-stats/avgspeed.png') no-repeat 15px center transparent;
  background-size: 25px 25px;
}

.tour-stats .stat.tot-distance {
  background: url('https://www.rtw.bike/wp-content/icons/tour-stats/totaldistance.png') no-repeat 15px center transparent;
  background-size: 25px 25px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div >
  <div >
    <div >
      <div >Corowa (08:12)</div>
    </div>
    <div >
      <div >128.21 km</div>
    </div>
    <div >
      <div >20.6</div>
    </div>
  </div>
  <div >
    <div >
      <div >Shepparton (16:38)</div>
    </div>
    <div >
      <div >6:13:57</div>
    </div>
    <div >
      <div >573.40 km*</div>
    </div>
  </div>
</div>