Display Event on Apple iPad is wrong

Thanks for letting us know. I’ll make sure Marcus knows about the issue.

hi,

sorry, we dont have any patch right now; however, how about overriding EM css styling in your theme style.css?

we don’t add any specific html/css for devices, we leave that up to the theme.

for example our demo site looks fine on ipad 4 – https://demo.wp-events-plugin.com/

Hi Marcus,
hi agelonwl,

I think it is a problem in the EM code. Please have a look for example on this event link:

https://oldtimer-veranstaltung.de/kalender/termine/oldtimer-genuss-tour-der-besonderen-art/

This is the code from EV for an event:

<div style=”float:left; margin: 5px 15px 10px 1px”>#_MAP</div>
<p>
Titel der Veranstaltung:
#_EVENTNAME

Datum:
#_EVENTDATES

Zeit:
#_EVENTTIMES Uhr
</p>
{has_location}
<p>
Start der Veranstaltung:
#_LOCATIONLINK
</p>
{/has_location}
<p>
Bundesland / Staat(en):
#_CATEGORYNAME
</p>
<br style=”clear:both;” />
#_EVENTNOTES

If you have a look with fullscreen, it is ok, if you look with Apple iPad you will see, displaying is wrong. (Both are on the left edge without margin). The given style overwrite all other css from the theme.

All other functions from EM and all other things are displaying right with my theme!

You can see it very well in the Google Chrome “Responsive Inspector”

I still think it’s an issue with code on your theme, we add practically no CSS rules to the events page, in fact the only thing we add is the inline CSS in that float above, which should still work (it does in 20 12).

Marcus, in fact the problem is the inline CSS in that float. It overwrite the css definition for all media queries for responsive webdesign with in this theme. No problem with any other WP Plugins on this website only with the EM on displaying in “iPad-Mode” under 1100px.

Do you have a suggestion to show an event as a container?

Thank you for help

you can change that using options page at Events > Settings > Formatting > Events > Default single event format

agelonwl,

yes, I know that I can change the definition. But I don′t know how the definition must be for display < 1100 px for iPad:

<div style=”float:left; margin: 5px 15px 10px 1px”>#_MAP</div>
<p>
Titel der Veranstaltung:
#_EVENTNAME

Datum:
#_EVENTDATES

Zeit:
#_EVENTTIMES Uhr
</p>
{has_location}
<p>
Start der Veranstaltung:
#_LOCATIONLINK
</p>
{/has_location}
<p>
Bundesland / Staat(en):
#_CATEGORYNAME
</p>
<br style=”clear:both;” />
#_EVENTNOTES

For all other screens, like desktop and smartphone it the definitions are ok!

How knows the right definition at Events > Settings > Formatting > Events > Default single event format to solve the displaying problem:

Example: https://oldtimer-veranstaltung.de/kalender/termine/4-bergfruehling-classic-2013/

you’ll need to add custom @media rules to your CSS stylesheets.

If you don’t know how you may need to consider hiring a designer to help with this : https://jobs.wordpress.net

Marcus, an expert for css had proven the theme. All is okay. Take Google Chrome with the Add on “Responsive Inspector” you will see the result.

The theme had all @media rules and all other without dispalying single event” works fine without any problem on Desktop, Tablet or Smartphone.

I just checked your web page again and minimized the screen, the provlem i see is that you have a google ad banner there that’s 700px long overflowing the page.

The issue I do accept is the google maps… that messes things up at some 300px width which would affect mobiles. will look into that but won’t be immediate… you may want to look at suggestions like this:

https://www.ads-software.com/support/topic/shortcode-locations_map-not-responsive?replies=3

Marcus,

this afternoon I test the mentioned page for responsive Webdesign for use on iPad. I was this page:

https://oldtimer-veranstaltung.de/kalender/veranstaltungen/veranstaltungsorte/

… and the following works with this definitions:

(You mentioned the “Google banner” is the problem, but it isn′t)

<div style=”float:left; margin: 5px 15px 10px 1px”>#_MAP</div>
Ort des Vermieters:
#_LOCATIONLINK

Adresse:
<p>
#_LOCATIONPOSTCODE
#_LOCATIONTOWN,
#_LOCATIONADDRESS,
#_LOCATIONSTATE,
#_LOCATIONCOUNTRY

Firmenportrait:
#_LOCATIONNEXTEVENT

<br style=”clear:both;” />
<p> </p>

But the following definitions didn′t work with the same definitions for responsive Webdesign on iPad:
https://oldtimer-veranstaltung.de/kalender/termine/4-bergfruehling-classic-2013/

(Here is no problem with “Google banner” at responsive webdesign)

<div style=”float:left; margin: 5px 15px 10px 1px”>#_MAP</div>
<p>
Name des Unternehmens:
#_EVENTNAME

Gültigkeit des Eintrages:
#_EVENTDATES

Standort /Verwaltung:
#_LOCATIONLINK

Bundesland / Land:
#_CATEGORYNAME
</p>
<br style=”clear:both;” />
#_EVENTNOTES

I may have misunderstood the problem…. do you mean the page is shown on full width rather than having padding on the left-right of the page?

If so, again, it’s your theme at fault. It’s not considering CPTs.

However, lucky for you, we accounted for this. Go to

Settings > Pages > Event Pages and under ‘Post Classes’ add page

Marcus,

sorry about my delay. To save the problem you wrote:

“Settings > Pages > Event Pages and under ‘Post Classes’ add page”

Because all text in Event Manager are in German Language and the translation is a little bit confusing.

These ar my questions:
– Event Page is ok
-Post Classes is “Body Klassen” or “Artikel Klassen” ?
– “…add page” —> what is the right entry in the line?

The problem is an all “event pages” on iPad disply!

Thank you for help

I’m not 100% sure about the exact one you need, it depends on your theme, but I’m guessing you need to add ‘page’ to Artikel Klassen