Home Page post alignment issue

Hi there,

in Dashboard > Settings > Reading you would have to change the Blog pages show at most to 9

FIXED IT THANK YOU

THERE ONE MORE ISSUE RELATED TO THE HOME PAGE, REGARDING IMAGE LAYOUT SIZE ISSUE AS PER GOOGLE SPEED TEST

Serve images that are appropriately-sized to save cellular data and improve load time. Learn more.
WordPress
Upload images directly through the media library to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using Full Size images unless the dimensions are adequate for their usage. Learn More.

Go to Customizer > Layout > Blog --> Featured Images >> Archives ( Tab ). Remove any Width / Height settings you have and set the Media Attachment Size to Medium ( 300px ) or Medium Large

Hi,

I have changed the settings as per your guide, earlier I was added manually 300 pixel width to show the gap between post image thumbnail, but once i change my settings as per guide there is no gap between post featured image, attached the link screenshot

Can you clear any caches as i cannot see the changes on the site

Cleared the cache, please check

Hi there,

Try add this CSS:

@media (min-width: 769px) {
    .generate-columns-container {
        justify-content: space-between;
    }
    .generate-columns-container article.post {
        width: 32%;
    }
}

Feel free to adjust the number.

Let me know :)

Doesn't work anything

current additional css code as follws

/* GeneratePress Site CSS */ /* Volume Remastered CSS */

/* Featured post in blog */
.featured-column.grid-100 {
width: 100%;
}

.featured-column.grid-100:not(.has-post-thumbnail) .gb-grid-wrapper > .gb-grid-column:first-child {
display: none;
}

/* Custom Post Navigation remove empty classes */
.featured-navigation .gb-grid-column:empty {
flex: 0 1;
}

@media(min-width: 769px) {
.featured-navigation .gb-grid-column:not(:empty) {
flex: 1 0;
}
}

/* Single Post Hero image responsive controls */
@media(max-width: 1024px) and (min-width: 769px) {
.page-hero-block:before {
background-size: cover;
}
.featured-column,
.featured-column img.wp-post-image {
width: 100% !important;
}
}

@media(max-width: 768px) {
.page-hero-block:before {
background: none;
}
}

/* Post Archives - force post meta to vertically align bottom */
.generate-columns-container .post>.gb-container,
.generate-columns-container .post>.gb-container>.gb-inside-container,
.post-summary>.gb-inside-container {
display: flex;
flex-direction: column;
height: 100%;
}

.post-summary {
flex: 1;
}

.post-summary>.gb-inside-container>*:last-child {
margin-top: auto;
}
/* Add border radius to post archive images */
.generate-columns-container .dynamic-featured-image {
border-radius: 4px;
} /* End GeneratePress Site CSS */

Can you add Ying's code in so we can see why it isn't working?

Hi

I have added the code, now the alignment issue has been fixed on the desktop browser, but in the mobile version, I don't want to show 3 posts in one single row, in mobile it should be one post one row, how to fix this issue

I just made her code desktop only:
https://generatepress.com/forums/topic/home-page-post-alignment-issue/#post-1819053

Okay, fixed now the mobile issue,

now check my earlier issue: https://generatepress.com/forums/topic/home-page-post-alignment-issue/#post-1818880

Upload images directly through the media library to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using Full Size images unless the dimensions are adequate for their usage. (this negatively affecting Page speed score)

I was just migrated to generate press from sahifa theme, do I want to regenerate all thumbnails?

Please open a new topic for the separate issue so we can keep one question per topic.

Thanks!

Okay