Content overflow issue in Homepage

[kajalgohel]

In the responsive(1199px and below) the content overflow is displayed on the ​https://wordpress.org/ page.

For better understanding I provide the Video attachment Link:
Video link: ​https://share.cleanshot.com/YVhf65Df2zjjV57tihLw

[nidhidhandhukiya]

I am able to reproduce this issue.
The reason behind this issue is :-

@media (max-width: 1199px)
.entry-content.entry-content>.alignfull .alignfull {
    margin-left: calc(var(--wp--preset--spacing--60)*-1)!important;
    margin-right: calc(var(--wp--preset--spacing--60)*-1)!important;
}

If we remove this line of css that issue is resolved.

[adamwood]

Replying to nidhidhandhukiya:

I am able to reproduce this issue.
The reason behind this issue is :-

@media (max-width: 1199px)
.entry-content.entry-content>.alignfull .alignfull {
    margin-left: calc(var(--wp--preset--spacing--60)*-1)!important;
    margin-right: calc(var(--wp--preset--spacing--60)*-1)!important;
}

If we remove this line of css that issue is resolved.

Unfortunately removing this line of CSS stops the cover images from being full width. I believe hiding the overflow on the group blocks wrapping these will fix the issue.

[multidots1896]

We need to add below css for covering the layout.

@media (max-width: 1199px)
.entry-content.entry-content>.alignfull .alignfull {
    margin-left: calc(var(--wp--preset--spacing--60)*-1)!important;
    margin-right: calc(var(--wp--preset--spacing--60)*-1)!important;
    width:100%;
}

[himshekhar07]

We need to add the below CSS for a solution.

@media (max-width: 1199px)
.entry-content.entry-content>.alignfull .alignfull {
    margin-left: calc(var(--wp--preset--spacing--60)*-1)!important;
    margin-right: calc(var(--wp--preset--spacing--60)*-1)!important;
    display: contents;
}

[viralsampat]

Hello Team,

I have checked it from my end and also I am able to reproduce this issue.

Also, I have checked meta trunk folder to make this change on CSS file, But I didn't found the same theme.

So, here, I have added my code:

@media (max-width: 1199px) {
    .entry-content.entry-content>.alignfull .alignfull{
        margin-left: calc(var(--wp--preset--spacing--10)*-1)!important;
        margin-right: calc(var(--wp--preset--spacing--10)*-1)!important;
        width: 100% !important
    }
}

[dd32]

You'll find the source files for the theme used on the WordPress.org homepage (and a local development environment for it) here: ​https://github.com/WordPress/wporg-main-2022

[ryelle]

#6603 was marked as a duplicate.

[ryelle]

This was fixed in ​4743f7c, by restricting that margin fix to only direct alignfull descendant elements. Thanks everyone here for their work on debugging.

[ryelle]

#6616 was marked as a duplicate.

[ryelle]

#6615 was marked as a duplicate.