iPhone issue

  • Resolved dangonn

    (@dangonn)


    7 years ago

    Greetings. I’m just about finished with the site, with basically just an iPhone issue to fix:

    However, on iPhone two things happen: (1) the “Belle Boats” title disappears and (2) there’s a gap between the image (grey drawing) and the Menu of dropdowns. I’m looking for a way to have the title show up and the Menu to appear just below the image. Any help out there?

    The page scaled fine in FireFox and Chrome on the PC, so I can’t duplicate the problem on my PC. iPad looks fine in landscape mode…in portrait mode the title appears lower than it should, maybe a related issue?

    Here’s the latest code I tried that didn’t work:

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px) { /* iPHONE */

    .has-header-image.twentyseventeen-front-page .site-branding,
    .has-header-video.twentyseventeen-front-page .site-branding,
    .has-header-image.home.blog .site-branding,
    .has-header-video.home.blog .site-branding,
    .has-header-image.twentyseventeen-front-page .custom-header,
    .has-header-video.twentyseventeen-front-page .custom-header,
    .has-header-image.home.blog .custom-header,
    .has-header-video.home.blog .custom-header {
    height: 135px; /* 185 auto */
    height: 25.2vh; /* 35.2 iPhone respond? */
    left: 0;
    max-width: 100%;
    min-height: 0;
    position: relative;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    }
    /*
    @supports ( object-fit: cover ) {
    .has-header-video.home.blog .site-branding,
    .has-header-image.twentyseventeen-front-page .custom-header,
    .has-header-video.twentyseventeen-front-page .custom-header,
    .has-header-image.home.blog .custom-header,
    .has-header-video.home.blog .custom-header,
    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video,
    .has-header-video .custom-header-media iframe,
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    -o-object-fit: unset; /* cover */
    object-fit: unset;
    }
    */

    .has-header-image.twentyseventeen-front-page .site-branding,
    .has-header-video.twentyseventeen-front-page .site-branding,
    .has-header-image.home.blog .site-branding,
    .has-header-video.home.blog .site-branding,
    .custom-header-media,
    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video,
    .has-header-video .custom-header-media iframe {
    position: static;
    }

    Any suggestions would be appreciated!

    The page I need help with: [log in to see the link]

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

    (@dangonn)

    Made some progress. (Revised CSS in the file at the site.) I’ll still got some sizing issues, but the title now appears on iPhone. I’ll check with Android too…when I can borrow an Android phone!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I was trying to figure out what you meant by this:

    there’s a gap between the image (grey drawing) and the Menu of dropdowns.

    When I realised the “Menu” button was no longer clickable because the header image was bleeding on top of it. To overcome this try adding this CSS:

    
.twentyseventeen-front-page.has-header-image .custom-header-media, 
.twentyseventeen-front-page.has-header-video .custom-header-media, 
.home.blog.has-header-image .custom-header-media, 
.home.blog.has-header-video .custom-header-media {
    z-index: 0;
}

    Can you provide a screenshot of this second issue? I don’t think I see the problem.

    Thread Starter dangonn

    (@dangonn)

    Thank you, that fixed the Menu issue! The Menu click-down was working fine on iPhone but wasn’t working in small browser windows.

    I was able to fix the second issue (the “gap”) by reverting to an older version of my CSS file…somewhere in there is the answer!

    Next step is to figure out how to set up a staging server for the site so that I can work out a couple more minor glitches off line.

    I’ll mark this one Resolved.

    Thanks again! –Dan

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘iPhone issue’ is closed to new replies.