Premium Theme Support › Graph Paper Press › Full Frame

Viewport height & Older posts

  • Author
    Posts
  • #97864
    streetchris
    Member

    Hey there,

    I have a couple of issues I can’t seem to resolve:

    1) I’d like the feature images to always fill the viewport of the user. I’ve added some CSS which fixes the height to 700px but this naturally only works on certain resolutions. Is there a solution that displays the image at the height of the resolution from the users chosen device?

    2) I’ve added a few more quote articles to my one page site and I’m now seeing an “Older Posts” button just above the footer. How do I remove this?

    Thanks,

    Chris

    The blog I need help with is: (visible only to logged in users)

    #98052
    maharzan
    Theme Author

    Hi Chris,

    1. Try this css

    .hentry { height: 100vh; }

    This is tricky because sometimes the image doesn’t render well if its too big.

    2. Thats the default behaviour to browse through older posts. To hide it, try this css

    #infinite-handle { display: none; }

    Thanks,
    Chandra

    #98060
    streetchris
    Member
    Original poster

    Both work great – thanks

    #98066
    streetchris
    Member
    Original poster

    Is it possible to have the text appear vertically centered in the viewport too? I’m using the quote module for all of them and it’s appearing a little high at the moment.

    Cheers.

    #98089
    maharzan
    Theme Author

    You can try this css

    .format-quote blockquote {
    padding: 2em;
}
.home .format-quote .entry-inner, .archive .format-quote .entry-inner {
    width: 50%;
    text-align: center;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    padding: 0;
    margin: 0 auto;
}

    Hope that helps.

    Thanks,
    Chandra

    #98091
    streetchris
    Member
    Original poster

    Seems to work for desktop only, is there a mobile addition to this CSS?

    #98205
    maharzan
    Theme Author

    Hi Chris,

    For mobile, you can do something like this

    @media only screen and (max-device-width: 480px) {
.format-quote blockquote {
    padding: 1em;
}
.home .format-quote .entry-inner, .archive .format-quote .entry-inner {
    width: 100%;
    text-align: center;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    padding: 0;
    margin: 0 auto;
}
}

    And change those values as you would like.

    Thanks,
    Chandra

  • The topic ‘Viewport height & Older posts’ is closed to new replies.