Read More Button and Excerpt Alignment

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

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?

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

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

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.

Okay. Thanks.

I'm creating a new topic.

No problem :)