Support

Home Forums Event Espresso Premium Mobile Tickets Moving around

Mobile Tickets Moving around

Posted: September 15, 2023 at 9:57 am


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.

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

Event Espresso