Support

Home Forums Event Espresso Premium TABLES IN MOBILE VIEW

TABLES IN MOBILE VIEW

Posted: January 10, 2020 at 8:56 am


sky

January 10, 2020 at 8:56 am

Hi guys

I still have a problem with the table (cart) on mobile view. It’s not responsible and just a part of the table is visible.

Attached is a picutre.

As well the buttons stick one on the other and it looks not so nice. Would be good to have a small space between the buttons.
Also a picutre of that situation.

Would be great to get your help.

Thank you
Cristina

http://www.skydesign.ch/neudikids_neu/wp-content/uploads/2020/01/TABLE_MOBILE_VIEW_01.png

http://www.skydesign.ch/neudikids_neu/wp-content/uploads/2020/01/BUTTONS_MOBILE_VIEW.png


Josh

  • Support Staff

January 10, 2020 at 6:57 pm

Hi Cristina,

Quite likely the issues are related to the active WordPress theme. Have you checked the cart on mobile view with another theme like one of the default WordPress twenty* themes activated?

In any case, we can help you put together some CSS that will override the theme’s CSS to make the cart items fit better on smaller screens. Can you share a link to an event on the site where we can add tickets to the cart?


Josh

  • Support Staff

January 10, 2020 at 7:33 pm

I found an event on your site. Here’s some CSS that will help everything fit better in the cart when it’s a small screen:

@media screen and (max-width : 800px){
.event-cart-grand-total a.event-cart-button {
 margin-top:2em;
}
.event-cart-button.button {
 display: block;
 margin-top: 1em;
}
.wpb_text_column .event-cart-tbl span.dashicons {
 font-size: 16px;
}
.event-cart-tbl td {
 padding: 5px 5px;
}
.event-cart-tbl tbody tr td,
.wpb_text_column .event-cart-tbl :last-child {
 font-size: 14px;
}
#event-cart {
 margin-left: -20px
}
}


sky

January 12, 2020 at 7:52 am

Hi Josh

Thanks for your feedback.
My problem is: All tables (Registration, cart after registration) fits perfect with mobile – just the first cart-table doesn’t fits.
Look, I send you a printscreen of the cart:
Cart Mobile-view

I remember I had the same problem for the registration-table and there you helped me with a css-code. After adding the code, it looked perfect.

Thanks for your help
Cristina


Josh

  • Support Staff

January 13, 2020 at 7:25 am

Hi,

I’m afraid the screenshot URL you’ve shared returns a 404 not found error.


sky

January 16, 2020 at 8:03 am

http://www.skydesign.ch/neudikids_neu/wp-content/uploads/2020/01/TABLE_MOBILE_VIEW_01.png


sky

January 16, 2020 at 8:04 am

Table view on Mobile


Josh

  • Support Staff

January 17, 2020 at 8:07 am

So of the CSS was still overridden. Can you change this from above:

.event-cart-button.button {
 display: block;
 margin-top: 1em;
}

to this?

#event-cart-tbl .event-cart-button.button {
 display: block;
 margin-top: 1em;
}


sky

January 18, 2020 at 3:57 pm

Hi Josh
Still not showing the full table, but it’s better than before:)
Thanks for your help!
Cristina


Josh

  • Support Staff

January 21, 2020 at 8:39 am

I checked and the full table shows on my iPhone

https://slack-files.com/T02SY781D-FSWT4KMGC-de405a8af8

Maybe there’s a specific event that has longer text which pushes the table out of view? If that’s the case, if you can share the URL for that event we can investigate further.

The support post ‘TABLES IN MOBILE VIEW’ 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 4 months, 2 weeks ago ago

Topic Tags

Tagged: ,

Notifications

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