[Resolved] Read More Button and Excerpt Alignment

Home Forums Support [Resolved] Read More Button and Excerpt Alignment

Home Forums Support Read More Button and Excerpt Alignment

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1401264
    Rohan Verma

    Can you take a look at the home page ‘Read More’ button?

    1. They are not properly aligned after including the excerpt. They should be aligned even if I increase the words count in the excerpt.

    2. I also want to move the homepage excerpt slightly upper. There is a gap between meta info and excerpt.

    #1401650
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Try this:

    .wp-show-posts-image.wpsp-image-left {
        margin-bottom: 2em;
    }

    2. This should do it:

    .wp-show-posts-entry-header {
        margin-bottom: 0.8em;
    }
    #1402243
    Rohan Verma

    Thanks, it’s working. But the gap of some the article titles is quite wide.

    1. Any possible way to reduce those gaps?

    2. The excerpt and Read More button is showing on the mobile version. How to remove that?

    #1402635
    David
    Staff
    Customer Support

    Hi there,

    1. You have set the margin-bottom to 5em – reduce that figure.
    I have also added the same rule in the CSS for mobile to reduce that gap.

    2. Try this CSS:

    @media (max-width: 768px) {
        .wp-show-posts-entry-summary, .wpsp-read-more {
            display: none;
            margin: 0;
        }
        .wp-show-posts-image.wpsp-image-left {
            margin-bottom: 1em;
        }
    }
    #1402984
    Rohan Verma

    Yes. Thanks. Working.

    1. But if the article title is long, the read more button sometimes shifts automatically for that particular title on desktop. While the rest is okay.

    2. I have used the centering site logo in mobile css code from the documentation. It works good. But the sub-menu item seems breaking the layout. Just tap/click on the menu icon on mobile version and help me on it.

    I’m using below code:

    #mobile-header .site-logo {
    position: absolute;
    left: calc( 50% – 110px); /* 50% from the left – half your image width */
    }

    #mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
    }

    #1403016
    Leo
    Staff
    Customer Support

    1. You’d need to crease the em value in Tom’s CSS here to accommodate that.
    https://generatepress.com/forums/topic/read-more-button-and-excerpt-alignment/#post-1401650

    2. Please open a new topic for this.

    #1403064
    Rohan Verma

    Okay. Thanks.

    I’m creating a new topic.

    #1403069
    Leo
    Staff
    Customer Support

    No problem 🙂

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