|
HIL Tennis
|
November 30, 2017 at 8:07 am
The [ESPRESSO_MY_EVENTS] works like advertised, but on small screens the information about events does not fit. See attached screenshot. Is there any way of making this work? Appreciate any help regarding this
On a mobile phone:  you need to scroll right in order to see the “actions” wheel 
|
|
Josh
|
November 30, 2017 at 11:14 am
Hi there,
More times often than not the WP theme adds some styles which end up making the display not fit on a small screen. Is there a way we can download the theme to investigate further? Or if you have a testing user account where we could log into your site to view the my events page, we could investigate that way too. You can send that information via the secure form on this page:
https://eventespresso.com/send-login-details/
|
|
HIL Tennis
|
November 30, 2017 at 2:23 pm
Or if you have a testing user account where we could log into your site to view the my events page, we could investigate that way too. You can send that information via the secure form on this page:
I have sent you the necessary information so you can login and check for yourself. Thank’s for your assistance Josh!
|
|
Josh
|
November 30, 2017 at 3:55 pm
You can add the following CSS to your site to make those table headings fit on smaller screens:
@media (max-width: 768px) {
table > thead > tr > th,
.espresso-my-events-table > thead > tr > th {
font-size: 16px;
padding: 12px 4px;
}
}
You can add the custom CSS to your site through the customizer.
Dashboard -> Appearance -> Customize -> Additional CSS.
|
|
HIL Tennis
|
November 30, 2017 at 4:14 pm
That css code does help, but the cog wheel is still outside and a user on a cell phone would have to drag the page too see the it. The cog wheel is an important part of this view as it enables more details. I think maybe removing “Venue” would really help. How can I do this? Yes I have copied the template file to my child-theme. Did this to add code so that only future events are visible.
|
|
Josh
|
November 30, 2017 at 6:03 pm
You could edit the PHP code to remove the venue, or try these styles adjust the text sizes a bit more to help everything fit:
@media (max-width: 768px) {
table > thead > tr > th,
.espresso-my-events-table > thead > tr > th {
font-size: 11px;
padding: 12px 0;
}
.espresso-my-events-actions-th {
font-size: 0 !important;
}
.espresso-my-events-table > tbody tr {
font-size: 12px;
padding: 12px 2px;
}
}
|
|
HIL Tennis
|
December 1, 2017 at 6:07 am
Thank’s Josh, it looks a lot better. I removed “Venue” by deleting that part from content-espresso_my_events-event_section.template.php and hiding the header column by using css (there might me a better way of doing it). Now the only thing left is removing the time from the dates. I’ve tried to do this by following @lorenzocaum ‘s instruction here https://gist.github.com/lorenzocaum/8e7479f36f3780a93074f4ed5c66266b but if I replace
<?php espresso_event_date_range('', '', '', '', $event->ID() ); ?>
with
$html .= '<span class="dashicons dashicons-calendar"></span>' . $datetime->date_range( $date_format );
//$html .= '<span class="dashicons dashicons-clock"></span>' . $datetime->time_range( $time_format );
it does not output the dates just the code
What am I doing wrong? (I’m not so good with PHP code)
|
|
Tony
|
December 1, 2017 at 6:49 am
That gist is incorrect and will need to be updated.
An easier method to do what you need is to revert the changes you’ve made and change:
<?php espresso_event_date_range('', '', '', '', $event->ID()); ?>
to this:
<?php espresso_event_date_range('', ' ', '', ' ', $event->ID()); ?>
(Note the additional spaces, that is what removes the time from the output)
|
|
HIL Tennis
|
December 1, 2017 at 7:44 am
Wonderfull, you are the best! Thank you so much Tony and Josh for helping out. Now it’s perfect! Have a good one..
Mobile view:
Desktop view:
|
