How to make the monthly timetable responsive

m0hamed
(@m0hamed)

2 years, 6 months ago

Assalam Alikum,

Jzk kheiran for this plugin in.
I was wondering if there was a way via settings or css to make sure the table fits the screen (i.e. responsive)
At the moment, unless I choose a page with full width, the monthly timetable won’t fit the screen.
Is there a way to make the monthly timetable responsive so it can fit mobile phones automatically?

jzk kheiran

wassalam,
Mohamed

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author mmrs151
(@mmrs151)

2 years, 6 months ago

Assalamualaikum my dear brother Mohamed,

I understand your frustration and this is mine too.
Putting table in css is one of the most difficult thing when it comes to responsiveness for a large table. Hence I had to do in this way.
Earlier version was forcing the table to see in desktop mode where user need to zoom in to read the line.

Please advice and share your expertise to make it easier for others inshaaAllah.

Mustafiz.

jamal1wp
(@jamal1wp)

2 years, 6 months ago

Asalam Alaikum,

This is my first here! Insha Allah, I will contribute more.

You can try adding the following CSS class to the table:

.text-responsive {
font-size: calc(100% + 1vw + 1vh);
}

Let me know if this works.

Jamal

Thread Starter m0hamed
(@m0hamed)

2 years, 6 months ago

Salam Alikum,

Jazakum Allah kheiran for helping me.

I have tried but it is not working unfortunately.

Even tried:
.cell { resize: both; overflow: auto; width: 100%; height: 100%; }

but no joy.

wassalam,
Mohamed
jamal1wp
(@jamal1wp)

2 years, 6 months ago
Asalam Alaikum,

Try the following:

.text-responsive {
font-size: .8vw !important;
}

Add the class to the div element below:
```
<div class="monthlyTimetable text-responsive" id="monthlyTimetable">
        
</div>
```
It’s going to look really small on a mobile device, but that’s what you wanted.

You may also modify styles.css instead which is probably easier:
https://yoursite/wp-content/plugins/daily-prayer-time-for-mosques/Assets/css/styles.css?ver=2021.08.10
```
.monthlyTimetable {
    width: 100%;
    overflow-x: auto;
    font-size: .8vw !important;
}
```
Jamal
- This reply was modified 2 years, 6 months ago by jamal1wp.
- This reply was modified 2 years, 6 months ago by jamal1wp.
- This reply was modified 2 years, 6 months ago by jamal1wp.