custom blog page

Hi there,

1. Have you tried unchecking the Display padding around the images option?
https://docs.generatepress.com/article/adjusting-the-featured-images/

2. WordPress doesn't support the featured image option for the posts/archive pages. You'd need to create a separate header element and use the custom image option and assign it to the posts page only:
https://docs.generatepress.com/article/header-element-overview/#background-image

3. Try this CSS:

@media (max-width: 768px) {
    .site-content .site-main {
        margin-left: 20px!important;
        margin-right: 20px!important;
    }
}

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

Let me know if this helps :)

thank you very much Leo,

issue 2 & 3 are solved.

Regarding the first issue:
I unchecked the display padding around images option and it looks perfectly aligned in mobile view, but not in tablet and desktop view - here the the image is overlapping somehow.

I could not figure out what the reason might be.

thanks for looking into it.

have a great day

Hi there,

Unchecking the Display Padding option removes the padding you have set in Customizer > Layout > Container > Padding - change this to 30px to match the CSS you have added....

thanks David,

now it works.

Have a great day.

You're welcome