|
Peter
|
August 25, 2022 at 4:00 am
Hi there, I have a page where people come to register for courses. A lot of the time we notice they are using their phone. A long time ago we had a ticket about the ESPRESSO_EVENTS_TABLE_TEMPLATE tag seeming to randomly break right, and it continues to do that. It’s a big deal because customers have been reporting to us that they have to struggle to register on the website as a lot of them can’t read “Register” on each of the events.
I have attached a screenshot at this link on my Google Drive.
https://drive.google.com/file/d/1wc6uT9O3l_hPaCAJ4mM1asejAnPJa_G5/view?usp=sharing
The way my tag is coded now is on a Text Block:
[ESPRESSO_EVENTS_TABLE_TEMPLATE show_expired=false table_paging=false table_sort=false table_pages=20 table_search=false order_by=start_date category_filter=false]
Can you help me figure out what to change in order that this table won’t break out of the screen, even on small iphones?
Thanks in advance, it means a lot to our family.
|
|
Tony
|
August 26, 2022 at 6:05 am
Hi there,
So currently the only way you’ll be able to prevent the above is to either reduce the size of the fields or hide one of them.
For example, you can use some CSS to hide the spaces remaining column on smaller screens, something like this:
@media screen and (max-width:768px){
#ee_filter_table .espresso-table-header-row .th-group:nth-of-type(3),
#ee_filter_table .space_remaining {
display: none;
}
}
Add that to Appearance -> Customize -> Additional CSS.
That looks something like this: https://monosnap.com/file/32Ddgb3Cy6ceR4Yv0I8hwUMFnhyQy0
Does that work for you?
The other option is to reduce the text size of all the fields, however, it does become harder to read that way.
|
|
Joao Victor
|
August 30, 2022 at 7:12 am
Hi Peter,
Thanks for contacting us in our email.
We hope you can reply to our message here with no issues.
I checked your website and you should try the same CSS code provided by Tony, but add the !important rule that will overwrite other codes that prevent it from working. Please, go to the Appearance > Customize > Additional CSS
@media screen and (max-width:768px){
#ee_filter_table .espresso-table-header-row .th-group:nth-of-type(3),
#ee_filter_table .space_remaining {
display: none !important;
}
}
It should look like this:https://share.cleanshot.com/Zo6Cw8
|
|
Peter
|
August 31, 2022 at 12:31 am
Thanks guys for the code. I applied the new code, but the problem now is that my partner informed me that it’s more important for us to show the “number of remaining spots” column instead of the “date” column for upcoming courses. I know it only happens in instances with a small screen size, but we always include the date of courses in the name of the course (column) anyways.
Thanks in advance.
|
|
Tony
|
August 31, 2022 at 2:15 pm
That’s easy enough to fix in the above code, change this:
#ee_filter_table .espresso-table-header-row .th-group:nth-of-type(3),
#ee_filter_table .space_remaining
To be:
#ee_filter_table .espresso-table-header-row .th-group:nth-of-type(4), #ee_filter_table .espresso-table-row .start_date
So:
@media screen and (max-width:768px){
#ee_filter_table .espresso-table-header-row .th-group:nth-of-type(4),
#ee_filter_table .espresso-table-row .start_date {
display: none;
}
}
When testing this I didn’t need !important; but if so, simply add it in 🙂
|
