Cover-Template: Page Title and Scroll Indicator below visible area (viewport)

  • Resolved j4n_solo

    (@j4nsolo)


    2 years, 6 months ago

    First of all, a big compliment to the great plugin. It has already saved me a lot of work and manual adjustments and is very helpful and easy to use. Thanks for that!

    Now that I’ve mostly got everything on my website right the way I want it to be, there is still a problem for which I can’t find a solution. I have activated the “Cover Template” on all pages. Everything looks as it should on the desktop computer. Not on the mobile phone, however, at least not in Safari and Chrome. I solved the problem that the background image or the cover template is too wide on the side and is not automatically adjusted with “width: 100dvw” and “height: 100dvh”. Unfortunately, however, the “entry-title” and the “scroll indicator” is still not displayed in the “viewport”, but below the visible area. With two-line titles you can at least see a little of the upper part, with one-line titles nothing at all. In Firefox and Edge everything works… the image is fully displayed, as well as the title and the arrow. What can I do here?

    I would be very happy about a solution! Thanks in advance.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter j4n_solo

    (@j4nsolo)

    Sorry that I’m asking again here, but I’m slowly starting to believe that this topic is simply being hushed up, because there is either no solution or simply nobody from those responsible wants to take care that it might work at some point. What about “mobile first”? Unfortunately I don’t see any of that in this case.

    Of course, while searching, I found one or the other who was also looking for a solution to this problem, but it can’t be just so few who notice that the coverplate view simply doesn’t work on Safari and Chrome mobile, or is completely useless because neither the page title nor the arrow are displayed, so that one knows that there is more to come below. After all, the coverplate view is one of the highlights of Twenty Twenty. That can’t be right???

    • This reply was modified 2 years, 5 months ago by j4n_solo.
    Plugin Author Twentig

    (@twentig)

    Hi,

    Thanks for your feedback. The Cover template is a feature implemented by the Twenty Twenty theme, not Twentig. 100vh with mobile browsers is a known issue. The only workaround I see is reducing the cover’s height and hiding the arrow. To do so, paste the following CSS code in the Customizer > Additional CSS panel (and remove the code you’ve added with dvh):

    @media only screen and (max-width: 769px) {
 
    .cover-header .to-the-content-wrapper {
        display: none;
    }
 
 
    .cover-header .screen-height {
        min-height: 90vh;
    }
}

    Thanks,
    Yann

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Cover-Template: Page Title and Scroll Indicator below visible area (viewport)’ is closed to new replies.