Read More Button and Excerpt Alignment

[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.

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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;
}

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohan Verma]

Okay. Thanks.

I’m creating a new topic.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts