WordPress.org

Ready to get started?Download WordPress

Forums

Events Manager
[resolved] Display Event on Apple iPad is wrong (17 posts)

  1. mustermann
    Member
    Posted 1 year ago #

    Hallo Marcus,
    hallo agelonwl,
    for example an event is displayed on a Desktop o.k.:
    http://oldtimer-veranstaltung.de/kalender/termine/4-bergfruehling-classic-2013/

    If you look for example this event on an Apple iPad 3 or 4 (1024 px) the display is wrong. The entry from the event stretched over the whole side.

    All other things on the website on an iPad are o.k. like on the Desktop!

    It might be a special Event Manager css für dispaying on iPad (@media only screen and (max-width: 1024px) {)

    Do you have a patch to have the right display for iPad?

    Thank you for help

    http://wordpress.org/extend/plugins/events-manager/

  2. caimin_nwl
    NetWebLogic Support
    Posted 1 year ago #

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

  3. agelonwl
    Member
    Posted 1 year ago #

    hi,

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

  4. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    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 - http://demo.wp-events-plugin.com/

  5. mustermann
    Member
    Posted 1 year ago #

    Hi Marcus,
    hi agelonwl,

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

    http://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"

  6. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    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).

  7. mustermann
    Member
    Posted 1 year ago #

    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

  8. agelonwl
    Member
    Posted 1 year ago #

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

  9. mustermann
    Member
    Posted 1 year ago #

    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: http://oldtimer-veranstaltung.de/kalender/termine/4-bergfruehling-classic-2013/

  10. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    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 : http://jobs.wordpress.net

  11. mustermann
    Member
    Posted 1 year ago #

    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.

  12. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    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:

    http://wordpress.org/support/topic/shortcode-locations_map-not-responsive?replies=3

  13. mustermann
    Member
    Posted 1 year ago #

    Marcus,

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

    http://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:
    http://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

  14. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    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

  15. mustermann
    Member
    Posted 1 year ago #

    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

  16. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    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

  17. mustermann
    Member
    Posted 1 year ago #

    Marcus,

    thank you for help.

    The word "page" worked in "Artikel Klassen".

    The same solution is to format "event locations".

    "Settings > Pages > Event Locations Page and add "page" in "Artikel Klassen"

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic