Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 5, 2016 at 9:35 am #720376
    opvab

    Hi,

    I have this CSS (see PC), and it works perfect for all Mobile units but Iphone S-models. On Iphone S-models the main content is not centre,
    but aligned to right. This align to the right is correct for PC/MAC, but not for Mobiles.

    /Thanks,
    OPVAB

    December 6, 2016 at 5:42 am #720820
    Rikard

    Hey opvab,

    Ok, so it works on a regular iphone6 but not on an iphone6s?

    Best regards,
    Rikard

    December 9, 2016 at 11:44 am #722379
    opvab

    Hi Rikard,

    Yes. All content is nicely centered on Iphone, except for models 5s and 6s.

    Thanks,
    OPVAB

    December 12, 2016 at 5:44 am #722925
    Rikard

    Hi,

    Ok, thanks for the info. Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    December 13, 2016 at 10:14 am #723628
    opvab

    Of course, see PC.

    //OPVAB

    December 16, 2016 at 10:08 am #725231
    Rikard

    Hi,

    Sorry for the late reply. I’m not sure why you are only having problems on those phone models but I’m guessing it’s down to your custom CSS. Could you try to target those models with specific CSS queries maybe?

    Best regards,
    Rikard

    January 4, 2017 at 1:28 pm #729389
    opvab

    Hi Rikard,

    for some reason, the S-models of Iphone doesn’t aquire the Media Query but instead use the Monitor CSS:
    main.template-page.content.av-content-full.alpha.units {
    right: -100px;
    }

    I can’t understand why the Iphone S-models behave differently from the rest!!!!
    Anybody who could help me find a @media only screen CSS, that pick up the S-models, so they don’t use the “right: -100px”

    OPVAB

    January 6, 2017 at 4:13 am #730135
    Ismael

    Hi,

    Please try the following css media queries.

    /* iPhone 5S */
@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) 
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

/* iPhone 6S */
@media only screen 
    and (min-device-width : 375px)
    and (max-device-width : 667px) 
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

    // http://stephen.io/mediaqueries/

    Best regards,
    Ismael

    January 8, 2017 at 2:42 pm #730857
    opvab

    Hi and thanks.

    Did not work unfortunately. I tried to modify to different modes, but Iphone 5S and Iphone 6S still behave differently.
    Feels like the models don’t listen to any “@media only screen” and use this:
    main.template-page.content.av-content-full.alpha.units {
    right: -100px;
    ,right off.

    Printscreen from Iphone 5S in PC.

    Thanks,
    OPVAB

    January 10, 2017 at 2:26 pm #731562
    Andy

    Hi,

    did you double check on a different iPhone as well? don’t forget to clear browser cache. For more information about media queries refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Also check with a default WP theme and let us know if you get similar results with it or not.

    Best regards,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.