Mobile Event Page Incorrect Display

[Rafael Zamith]

First of all, I would like to thank for the fast responde at twitter.

I’ll explain what is the main problem, that make me afraid to buy Wootickets…

You can see the page with the event resume is with the buttons overlaying the date at the title but it is ok, not great but it is organized and with a few information at the right side: https://docs.google.com/file/d/0B_lfXb8d7DGAU05JcXJRbjZkZjQ/edit?usp=sharing

But when you go to the event page,it gets messed up and impossible to read: https://docs.google.com/file/d/0B_lfXb8d7DGALUNsUGtnUUNiS0E/edit?usp=sharing

This printscreen shows that is goes all the way down and the Google Map preview is the only thing that seems right, because the image gets distorted: https://docs.google.com/file/d/0B_lfXb8d7DGAX0Z5VXl4dkxlanM/edit?usp=sharing

Sorry about my english but I think I was clear.

So, I need a help with this because the majority of my intended audience access with their mobile phones and because I need to buy Wootickets, but with this behavior I’m starting to think twice. And I need to be with the website online next week.

OBS: I’m using the lastest version of Superstore Woothemes. If you need more information, just ask.

Thank you very much.

UPDATE: Now with Wootickets activated the tickets are corretcly put together, but the additional information does not display correctly and doesn’t fit the screen as it should.

[Barry]

Hi rgzamith,

You would need to change/add some stylesheet rules and possibly make some changes to your templates.

This isn’t really a WooTickets issue though, it’s really a more general problem so I’m going to move this across to our Events Calendar PRO forum. In them meantime, please take a look at our Themer’s Guide for information about customizing the events stylesheet and how to make customizations by overriding templates.

Thanks!

[Rafael Zamith]

Thanks for the reply Barry!
I’m not good at “code” and this kind of stuff, so I think I have to live with that.

Is there any way to organize the mobile event page with a different body from another theme, because even if I could live with that, it’s going to be anoying for my customers.

Is there any way to change the tickets order, because when you add more than one, the order is kind of random and I want to know if there is any possibility to organize it.

Thanks.

[Rafael Zamith]

I’ve just noticed that this error only occurs when the phone is in portrait mode, because when it is on landscape mode de event page display perfectly organized, just as the desktop site shows.
But I’m even more confused about this, because it doesn’t seems to happen all time. Any reason why this is happening only with portrait mode with iPhone?
Thanks.

[Barry]

It may simply be the layout is unsuitable for a particularly narrow viewport – as becomes the case on some screen sizes in portrait mode – and your iPhone’s browser is having to compress it because it doesn’t know what else to do.

You could try customizing your events.css file to workaround this – please read our themer’s guide and template overrides tutorial first of all, but in essence you would copy this file:

wp-content/plugins/the-events-calendar/resources/events.css

Then place your copy in:

wp-content/themes/{YOUR_THEME}/events/events.css

(You may have to create that events subdirectory in your theme if it does not already exist.)

Then add this snippet to the bottom. That may not be perfect for your needs (I don’t have an iPhone available to test with but it seems to work on other devices where I can see a similar problem) but you can always tweak it slightly to meet your needs.

Does that help at all?

[Rafael Zamith]

I’ve tried to customize the events.css file but the same behavior remains. Take a look yourself with a mobile phone at this page: atleticaesamc.com.br/eventos/festa-fantasia-2013/

It doesn’t matter the which phone, it always shows wrong at portrait mode and correctly at landscape, because the columns doesn’t behavior like it should, putting the content of another column below the first one.

I’m really disapointed because 20% of my traffic is mobile, and it is not displaying correctly.

I’m thinking if it happens only with me.

Thank you.

[Barry]

Hi Rafael –

I can’t see that snippet in any of your stylesheets, which file did you add it to? It’s possible I’m missing it, but I just want to be sure it is in the correct place and doesn’t contain any obvious typos, etc.

Thanks!

[Rafael Zamith]

Hey Barry,

Thank you for the always fast support.

My friend help me with the file changes but we already undid the changes, that’s why you don’t see anything, sorry.

What I want to accomplish is a behavior of the columns just like the three columns at the description, that display one below the another when at the mobile site.

I’m really alone in this matter, because my friend can’t help me a lot and I don’t know a thing about customizing any files, I’m sorry hehe.

Could take a look at the behavior of the three columns at the event description and see if you could guide me through editing the files that need some changes?

Info about the columns at the description: Column one starts with “Open Bar” / Column 2 with “Atrações” / Column 3 with “Pontos de Venda”

Event page: http://atleticaesamc.com.br/eventos/festa-fantasia-2013/‎

Thank you very much.

[Barry]

OK. Was there a reason why you removed the snippet – did it cause problems or was it simply not quite what you wanted?

[Author]

Posts