post padding on mobile (generate blocks)

Hi Torsten,

Try adding this CSS:

@media (max-width: 768px) {
    .blog #main {
        margin-inline: 20px;
    }

    .blog #main .entry-content .wp-block-media-text__content {
        padding-inline: unset;
    }
}

The overflow is coming from a custom CSS rule. In Appearance → Customize → Additional CSS there’s this block:

@media (max-width: 768px) {
    .wp-block-media-text {
        box-sizing: border-box;
        direction: ltr;
        display: grid;
        grid-template-columns: 100% 1fr;
        grid-template-rows: auto;
        padding: 0px !important;
    }
}

The 100% 1fr creates a second column that the first already-full-width column pushes off-screen — that’s the horizontal scroll you’re seeing between roughly 601px and 768px. It should be a single column.

Replace that block with:

@media (max-width: 768px) {
    .wp-block-media-text {
        box-sizing: border-box;
        direction: ltr;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        padding: 0px!important;
    }
    .wp-block-media-text > .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 1;
    }
    .wp-block-media-text > .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 2;
    }
}

This stacks the image above the text in a single full-width column on screens up to 768px, which matches what the blocks already do at 600px and below.

You are welcome!