Support

Home Forums Event Espresso Premium Event Espresso Table View Not mobile friendly on my site

Event Espresso Table View Not mobile friendly on my site

Posted: March 15, 2019 at 1:39 pm


cperez35

March 15, 2019 at 1:39 pm

I need help in customizing the CSS Style sheet to get the Table view for Event Epsresso 4 to work correctly on a IOS mobile device. An example page would be http://academyflorida.kinsta.cloud/courses/isc2-cissp-certified-information-systems-security-professional-boot-camp/

If you click on the “Schedule Tab” on a mobile device the table is cut off not allowing the user to enroll. The table does look fine if you hold the phone horizontally but is cut off if you hold the phone vertically.


Josh

  • Support Staff

March 15, 2019 at 2:50 pm

Hi,

You can first override the theme’s styles where it adds 80px for margins and padding to the list of dates:

.ee-table-view-datetime-list {
padding-left: 0;
margin-left: 0;
list-style-type: none !important;
}

Then add this breakpoint to override the other stylesheet’s margins and padding to give the table enough space on small screens:

@media (max-width: 460px) {
.vc_tta-panel-body .espresso-table {
margin-left: -14px;
}
#learn-press-course {
padding: 0;
}
.lpcourse-main .col-md-8 {
padding: 0;
}
}

The support post ‘Event Espresso Table View Not mobile friendly on my site’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Josh 2 months ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!