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

You must be logged in to reply to this support post. Sign In or Register for an Account

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: publish

Updated by  sky 2 days, 9 hours ago ago

Topic Tags

Notifications

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