Making WordPress.org

Opened 19 months ago

Closed 18 months ago

Last modified 18 months ago

#6587 closed defect (bug) (fixed)

Content overflow issue in Homepage

Reported by: kajalgohel's profile kajalgohel Owned by:
Milestone: Priority: normal
Component: WordPress.org Site Keywords: needs-patch
Cc:

Description

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

Change History (10)

#1 follow-up: @nidhidhandhukiya
19 months ago

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.

#2 in reply to: ↑ 1 ; follow-up: @adamwood
19 months ago

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.

#3 in reply to: ↑ 2 @multidots1896
19 months ago

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

#4 @himshekhar07
19 months ago

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

#5 @viralsampat
19 months ago

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
    }
}
Last edited 19 months ago by viralsampat (previous) (diff)

#6 @dd32
19 months ago

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

#7 @ryelle
18 months ago

#6603 was marked as a duplicate.

#8 @ryelle
18 months ago

  • Resolution set to fixed
  • Status changed from new to closed

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

#9 @ryelle
18 months ago

#6616 was marked as a duplicate.

#10 @ryelle
18 months ago

#6615 was marked as a duplicate.

Note: See TracTickets for help on using tickets.