Support

Home Forums Event Espresso Premium Mobile Tickets Moving around

Mobile Tickets Moving around

Posted: September 15, 2023 at 9:57 am

Viewing 5 reply threads


unico2023

September 15, 2023 at 9:57 am

How do I get the mobile tickets are moving all around how do I fix? It like its in an iframe but its not?

https://unicogpc.info/events/community-leadership-award-gala/

also anyway to show the surcharge at checkout? Thanks!


Rio

  • Support Staff

September 16, 2023 at 9:23 am

Are you talking about the Overflow? the styling Overflow-x is set to auto. It only shows if your font text is bigger and won’t fit on the screen.

You can increase the font size of this class.
.tkt-slctr-tbl-wrap-dv

EE is also using em in font and em is font-relative unit, so it is basing its size on your body.

For the surcharge, check this article here.
https://eventespresso.com/topic/displaying-surcharge-in-checkout-payment-option-page/

Thanks


unico2023

September 18, 2023 at 10:23 am

Do you mean decrease? Can I set the overflow-x to a set figure? I decreased the font size but its super small. Thanks!


Rio

  • Support Staff

September 18, 2023 at 3:46 pm

Increase. Overflow-x won’t show up if font is small or just fit on screen. When you say you want it moving around, do you want to have like this?
https://monosnap.com/file/RBQSFuNJLt9YkHBWo9cWjNuaeU9i5H

If that’s the case, then make a css query for mobile. Then on mobile, set it to this.

.event-content {
max-width: 300px;
max-height: 500px;
overflow: scroll;
}

event-content is used throughout the EE, so you have to target specific page where you want that code to run.

thanks


unico2023

September 19, 2023 at 10:05 am

I do not want it to have that, No scroll, but I think I get it.


unico2023

September 19, 2023 at 10:26 am

ACtually it’s still moving around like that on mobile… lost on this one.


Tony

  • Support Staff

September 19, 2023 at 3:35 pm

Hi there,

Try something like this:

@media (max-width: 640px) {
    .tkt-slctr-tbl th.ee-ticket-selector-ticket-details-th, 
    .tkt-slctr-tbl td.tckt-slctr-tbl-td-name,
    .tkt-slctr-tbl td.tckt-slctr-tbl-td-price.jst-rght {
        font-size: .7rem;
    }
}

Add that to Dashboard -> Appearance -> Customize -> Additional CSS.

That reduces the font size of the event name and ticket details for mobile screens, which should prevent the horizontal scroll.

Viewing 5 reply threads

The support post ‘Mobile Tickets Moving around’ 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.

Event Espresso