Ticket Info fields are too narrow on a mobile device

[Tina Stent]

The ticket selection and additional fields are way too narrow on mobile devices – how do I fix this?

[Geoff B.]

Good evening Tina and welcome back!

Thank you for reaching out to us.

We are sorry to hear about the display being too narrow on mobile.
I would love to help you with this topic.

I believe the culprit is a few CSS rules found in your WordPress theme.

I would recommend adding the following rule to your theme’s style.css or custom CSS section.

@media screen and (max-width: 768px) {
.single-tribe_events table.cart tr, .single-tribe_events #main-content table.cart tr, #content-area table tr {
max-width: none;
}
.tribe-events-style-full .tribe-events-tickets td, .tribe-events-tickets td {
max-width: none !important;
}
.tribe-event-tickets-plus-meta input[type="text"], .tribe-event-tickets-plus-meta input[type="email"], .tribe-event-tickets-plus-meta input[type="url"], .tribe-event-tickets-plus-meta input[type="password"], .tribe-event-tickets-plus-meta textarea {
width: 100%;
}
}

Let me know how that goes.

Best regards,
Geoff B.

[Tina Stent]

Worked perfectly! Thank you so much for the super quick response 🙂

[Tina Stent]

It looks ok on a Samsung (widened) but on a iPhone

[Geoff B.]

Good afternoon Tina,

I am glad we are making progress on this.

I just tested it on an iPhone SE and it looks OK as well.
Can you expand on your iPhone comment ? Or perhaps just do some screenshots ?

Best regards,

Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts