#6587 closed defect (bug) (fixed)
Content overflow issue in Homepage
Reported by: | 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)
#2
in reply to:
↑ 1
;
follow-up:
↓ 3
@
2 years 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
@
2 years 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
@
2 years 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
@
2 years 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 for review.
@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
}
}
#6
@
2 years 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
I am able to reproduce this issue.
The reason behind this issue is :-
If we remove this line of css that issue is resolved.