|
Jarred
|
March 9, 2020 at 1:43 pm
Hey guys, the shortcode for “Myevents” using the wpuser integration is making the table look bad on mobile. Its not a responsive table for some reason.
https://www.screencast.com/t/aw3GOUPYfUz
As you can see the column for “When” makes the dates look horrible. Any suggestions to fix this? thank you
|
|
Josh
|
March 10, 2020 at 8:49 am
Hi Jarred,
There’s ways to adjust the table on smaller screens. May I ask what did you have in mind? Maybe something like let the table stretch to the right off screen to allow more width for that column, then include a horizontal scroll bar?
|
|
Jarred
|
March 10, 2020 at 3:32 pm
Hi Josh, that sounds like it might work. as long as the scroll bar was a dark enough, noticeable color. The majority of our traffic is mobile, so whatever would make the table look good on iphones and samsungs I assume. But I would trust your ideas way more then mine for that.
|
|
Josh
|
March 12, 2020 at 1:42 pm
Hi,
Here’s some CSS you can try out:
.espresso-my-events-table {
width: 100%;
display: block;
overflow-x: auto;
white-space: nowrap;
scrollbar-color: #852284 #fb2056;
}
/* specific to mobile devices */
.espresso-my-events-table::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #852284;
}
.espresso-my-events-table::-webkit-scrollbar-thumb {
background: #fb2056;
}
The colors can be customized to match your site.
|
