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
September 16, 2023 at 9:23 am
Add New Note to this Reply
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
Add New Note to this Reply
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
September 18, 2023 at 3:46 pm
Add New Note to this Reply
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
Add New Note to this Reply
I do not want it to have that, No scroll, but I think I get it.
unico2023
September 19, 2023 at 10:26 am
Add New Note to this Reply
ACtually it’s still moving around like that on mobile… lost on this one.
Tony
September 19, 2023 at 3:35 pm
Add New Note to this Reply
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.