Wosley Alarico Wosley Alarico - 1 month ago 7
CSS Question

Changing the display properties of a table

I used table cell to this on my site:

enter image description here

But as you can see on the picture:

enter image description here

The mobile view looks a bit odd so I would like the green no now be displayed horizontally and it's cells underneath each other.

I have checked few answers from SO already but could understand properly.
Here my fiddle: https://jsfiddle.net/Wosley_Alarico/y7wqj55p/2/

Tried changing the display properties to inherit but nothing much happens:

enter image description here

tr{
display: inherit;
}


How can I make green bars be displayed horizontally on top of their cells?
Hope I could make some sense. Thanks in advance

Answer

Please add this to your CSS:

@media (max-width: 550px){
    .five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {

        width: 100% !important;
    }
    td, tr {
        display: block;
    }
    p.rotate.column-second {
        position: initial;
        -webkit-transform: inherit;
         transform: inherit;
        -o-transform: inherit;
        -moz-transform: inherit;
    }
    td.column {
        width: inherit;
        padding: 0 !important;
    }
    table img {
        width: 100%;
    }
    .org-chart td {
        padding-left: 0;
    }
}