I suppose that your example is the table correct?
If yes, then you should place IDs or classes to td elements.
Then inside your css file, you use the @media to set your desired responsiveness.
Now, normally (for example for @media min-width: around 700 px you should be ok. For @media max-width: around 420px which is the mobile version you set in td class of the table width: 100%;
So:
1st step: inside your css you place wraps like this:
@media screen and (min-width: XXXpx) { }
where XXX the desired width you want your appearance to change. Inside the brackets you place your CSS coding like this:
div.day-wrapper{width:100%;}
If you do this in normal CSS, then you see the result. So, you just need to tell CSS to show this result at specific screen width.
So, in you css file you may use something like this:
…
@media screen and (max-width:420px) {
div.day-wrapper{width:100%; }
.day-wrapper{width:100%;}
.day-weekday{width:100%;}
}
…
Add inside those brackets whichever element you want to fill the screen by adding width:100%;
Sometimes, you need to use this: 100%!important; to override some other CSS
