How to make this grid table better for mobile devices? - html

Question

I have almost done my grid time table. On desktop it looks perfect i'd say. Little issue is mobile. On bigger phones it looks maybe fine but on my Iphone 13 mini it's.. You can see that some texts are not fit in their fields like "Kondiční kickbox" in second and fourth line.
Maybe reduce time fields? You know i have 06-07, 07-08 .... 14-15 but for mobiles it could be only 06-15. But i'd must make second grid table and always hide one and show another one depend on width of device.
.grid {
display: grid;
grid-template-columns: repeat(64, 1fr);
text-align: center;
}
.grid > * {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #c0c0c0;
padding: 5px 5px;
font-weight: bold;
height: 66px;
line-height: 1.5rem;
font-size: 13px;
}
.span-col-4 {
grid-column: span 4 / auto;
}
.span-col-48 {
grid-column: span 48 / auto;
}
.span-col-6 {
grid-column: span 6 / auto;
}
.span-col-2 {
grid-column: span 2 / auto;
}
.span-col-38 {
grid-column: span 38 / auto;
}
.span-col-5 {
grid-column: span 5 / auto;
}
.span-col-44 {
grid-column: span 44 / auto;
}
.span-col-60 {
grid-column: span 60 / auto;
}
.time,
.day-column {
background-image: linear-gradient(
to top,
#b51c18,
#c6201a,
#d8231d,
#ea271f,
#fc2b21
);
color: white;
height: 45px;
}
.day-column {
color: black;
}
.sparingy {
background-image: linear-gradient(
to bottom,
#02080a,
#0d1c21,
#0e2b37,
#103c50,
#154c6a
);
color: white;
}
.kickbox6 {
background-image: linear-gradient(
to bottom,
#ffa93a,
#ffa32f,
#ff9d24,
#ff9716,
#ff9000
);
color: black;
}
.kickbox10 {
background-image: linear-gradient(
to bottom,
#ff9000,
#ff8100,
#ff7200,
#ff6100,
#ff4d00
);
color: black;
}
.rodice {
background-image: linear-gradient(
to bottom,
#fffe00,
#f4fe00,
#eaff00,
#deff00,
#d3ff00
);
color: black;
}
.mma {
background-image: linear-gradient(
to bottom,
#ff0e00,
#ea0e02,
#d50e03,
#c00e04,
#ac0d04
);
color: white;
}
.zavodnici {
background-image: linear-gradient(
to top,
#114560,
#0f5274,
#0c5f88,
#096c9d,
#0a79b3
);
color: white;
}
.sparingy {
background-image: linear-gradient(
to bottom,
#0063ff,
#1748cc,
#142f9c,
#09186f,
#000046
);
}
.kondicni {
background-color: #489bc9;
color: black;
}
.box {
background-color: #524d4d;
color: white;
}
#media screen and (max-width: 1024px) {
.grid > * {
font-size: 1.5vw;
line-height: 1rem;
}
}
<div class="grid">
<div class="span-col-4 time"></div>
<div class="span-col-4 time">06:00-07:00</div>
<div class="span-col-4 time">07:00-08:00</div>
<div class="span-col-4 time">08:00-09:00</div>
<div class="span-col-4 time">09:00-10:00</div>
<div class="span-col-4 time">10:00-11:00</div>
<div class="span-col-4 time">11:00-12:00</div>
<div class="span-col-4 time">12:00-13:00</div>
<div class="span-col-4 time">13:00-14:00</div>
<div class="span-col-4 time">14:00-15:00</div>
<div class="span-col-4 time">15:00-16:00</div>
<div class="span-col-4 time">16:00-17:00</div>
<div class="span-col-4 time">17:00-18:00</div>
<div class="span-col-4 time">18:00-19:00</div>
<div class="span-col-4 time">19:00-20:00</div>
<div class="span-col-4 time">20:00-21:00</div>
<div class="span-col-4">Pondělí</div>
<div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div>
<div class="span-col-4 kondicni">Kondiční kickbox</div>
<div class="span-col-6 box">BOX</div>
<div class="span-col-2"></div>
<div class="span-col-4">Úterý</div>
<div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div>
<div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div>
<div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div>
<div class="span-col-5 mma">MMA</div>
<div class="span-col-6 zavodnici">K1 - závodníci</div>
<div class="span-col-2"></div>
<div class="span-col-4">Středa</div>
<div class="span-col-44">Soukromé lekce a veřejnost po domluvě</div>
<div class="span-col-4 rodice">
Rodiče a děti <br />
3 - 6 let
</div>
<div class="span-col-4 kondicni">Kondiční kickbox</div>
<div class="span-col-6 box">BOX</div>
<div class="span-col-2"></div>
<div class="span-col-4">Čtvrtek</div>
<div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div>
<div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div>
<div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div>
<div class="span-col-5 mma">MMA</div>
<div class="span-col-6 zavodnici">K1 - závodníci</div>
<div class="span-col-2"></div>
<div class="span-col-4">Pátek</div>
<div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div>
<div class="span-col-6 sparingy">Sparingy</div>
<div class="span-col-6"></div>
<div class="span-col-4">Sobota</div>
<div class="span-col-60">Pronájem, semináře, akce, atd...</div>
<div class="span-col-4">Neděle</div>
<div class="span-col-60">Pronájem, semináře, akce, atd...</div>
</div>

Answer 1

Not easy, when it doesn't fit... it doesn't fit! And any solution gives a not so nice design, all is question of compromise!
You are already changing font-size when smaller... You could continue but for this text to fit in kickbox6 (for example) it would be very very small font-size.
You can try text-overflow:ellipsis to see if that can suit you.
For example to kickbox6 you can add:
.kickbox6 {
background-image: linear-gradient(
to bottom,
#ffa93a,
#ffa32f,
#ff9d24,
#ff9716,
#ff9000
);
color: black;
overflow: hidden;
width: 64px // your grid column size
text-overflow: ellipsis;
white-space: nowrap;
}
No the nicest effect but it fit...