responsive partially working for iphone with sidebar?

  • This theme looks amazing on every device I’ve tried except iphone it’s not wrapping to 1 column with sidebar layout. I’ve tried pc desktop resize all browsers, android phone and tablet, windows phone, iphone 4 and customer has iphone 5s and tried the online iphone viewport emulator. All perfectly responsive for no sidebar layouts. 2 col post grid layout also responsive (one column on the iphones). On the iphone devices the header image and menu (hamburger fine), footer 3->1 col fine. Only sidebar layout section not wrapping (seems to stay at 2 col no matter what I do both portrait and landscape). Left col does focus tried both left and right sidebar layouts, but right col stays on the right.

    Tried changing viewport meta tag to <meta name=”viewport” content=”width=device-width, initial-scale=1″> which makes it possible to scroll over to 2nd right col in sidebar layout. Tried adding css @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) section to child theme and media-queries.css (just in case) which works for another theme I use and the following css to force to test (working 1 col on every device except iphones):
    #zoom-theme-main {float: none;min-width: 100%;width: 100%;display: flex;flex-direction: column;}
    #primary.site-content.page-with-sidebar-left {float: none;display: block; min-width: 100%; width: 100%;order:1;padding: 10px !important;}
    #secondary.widget-area.leftside {float: none;display: block;min-width: 100%; width: 100%;height:auto; order:2;padding: 10px !important;}

    Any suggestions on what to try next would be very appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter astimegoesby

    (@astimegoesby)

    Looks like display flex css support is not out of the box on safari.

    Thread Starter astimegoesby

    (@astimegoesby)

    I put the following in child css and now all my devices seem to be displaying responsively.

    /* iphone add sidebar wrap*/
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    #zoom-theme-main {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    }

    /* chrome mobile/responsive tester to show result of testing sidebar wrap */
    #primary,#content,#secondary,#tertiary {
    display:inline-block; /* for Chrome desktop resize */
    }

    }

    Theme Author GhozyLab

    (@ghozylab)

    Hi @astimegoesby

    Thank you very much for this information, we will try it from our side and will apply this on the next release.

    Thank you very much ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘responsive partially working for iphone with sidebar?’ is closed to new replies.