Mobile responsiveness of Tickets Plus Plug in

[Paul]

Hi, I’ve posted previously about this issue and received some custom CSS to cure the problem of the plug in not being mobile responsive.

The CSS code it was suggested I use was
@media and (max-width: 600px) {
table.tribe-events-tickets tr .woocommerce {
width: 100%;
}

table.tribe-events-tickets tr .tickets_name {
width: 100%;
}

table.tribe-events-tickets tr .tickets_price {
width: 100%;
}

table.tribe-events-tickets tr .tickets_description {
width: 100%;
}
}

Thing is, my page still looks like the attached, ok on mobile when it’s landscape, but muddled in portrait.
As you’ve probably guessed, I’m new to this and need a little spoon feeding with regard to solving this issue!

Thanks!

[Geoff B.]

Good evening Paul and welcome back!

Thank you for reaching out to us.

We are sorry to hear that the ticket purchasing interface does not look good on all devices on your website.

I would love to help you pursue this topic a bit further.

You are right.

Ideally, you would want to define CSS rules for every possible view: Phone portrait, phone landscape, Table Portrait, Tablet landscape.

While at it, it is also good practice to run several tests with different make and models.

In other words, the above CSS is indeed a good start.
But it looks like there would need to be other rules defined to cover the different possibilities with your specific theme.

If you can provide me with the URL of a real or dummy upcoming event that has a WooCommerce ticket on your site, I’ll gladly get you started on the right track towards that purpose.

Best regards,

Geoff B.

[Paul]

Super,
THanks for your help,
CHeck out http://www.ridestaffs.co.uk/event/ridestaffs-spring-forward-sportive/ for example.

THanks

Paul

[Geoff B.]

Good evening Paul,

Thank you for the example.

I went ahead and looked at your site and somehow, there is no trace of the previously suggested CSS rules ?

In case this is an issue related to format they are again with some tweaks.

Try adding them to your style.css file or in your Custom CSS metabox:

@media only screen and (max-width: 600px) {

table.tribe-events-tickets tr .woocommerce {
width: 100% !important;
}

table.tribe-events-tickets tr .tickets_name {
width: 100% !important;
}

table.tribe-events-tickets tr .tickets_price {
width: 100% !important;
}

table.tribe-events-tickets tr .tickets_description {
width: 100% !important;
}
}

That should fix the portrait issues.

As for the landscape part, try

@media only screen and (max-width: 600px) and (orientation: landscape) {
table.tribe-events-tickets tr td {
padding: 15px 6px;
}
}

Let me know if that helps.

Have a great day!

Geoff B.

[Paul]

Hi there,
THanks for the reply, I’ve done that now.

CSS metabox looks like the attached. No change on the mobile version of the site though (image attached)

Appreciate that I’m likely overlooking something really stupid!

Thanks

Paul

[Gergana]

Hi Paul,

I can tell you something that saved me alot of headbanging. Sometimes (very often) when you make a fine tuning of the CSS, the browser may tricks you. To be extra sure that this will not happen you can hard reload the page this can be done when you enter inside the DevTools(pressing once F12) and after that go to the reload icon in the upper left corner near the back and forward button and press right button of the mouse. It will dropdown menu with 3 options. Hard reload will reload all the styles, as they are. I am saying this if your browser is caching something this will prevent from realtime checks.
Hope this will be nelpful

[jonspall]

Hello there,

I was about to open this exact subject myself when I see that Paul is having EXACTLY the same issues as me – indeed my site looks identical to Pauls screen-shot. I tried the suggested css (by pasting it into the CUSTOM CSS field in Avada Theme options) with no effect at all.

I am using the Avada theme with woocommerce and event tickets plus, so please keep looking for a solution to the non-responsiveness of the plug-in as I feel it will help me also!

Many thanks

Jon

[Geoff B.]

Good evening all,

Thank you for your engagement level.

This is totally my fault. My apologies.

In the previous CSS rule, I accidentally added an extra { bracket.
This, of course, broke the rule.

I have corrected it and tested it successfully.

You can see the updated code here: https://theeventscalendar.com/support/forums/topic/mobile-responsiveness-of-tickets-plus-plug-in/#post-1221986

Let me know how that goes.

Best regards,
Geoff B.

[Paul]

Thanks for sending this over,
Works perfectly, for anyone else reading the thread who’s as basic as me, don’t forget to empty cache on wordpress once you’ve updated the CSS. Then it looks great!

Thanks again for your help

[Geoff B.]

Good evening Paul,

I am super stoked that this works for you!

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts