Opened 2 years ago
Closed 15 months ago
#6743 closed defect (bug) (wontfix)
Design break issue in the Five for the Future page
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | lowest | |
Component: | Five For The Future | Keywords: | needs-patch has-screenshots needs-design-feedback |
Cc: |
Description
Please check the below URL:
https://wordpress.org/five-for-the-future/
When we inspect the page and set the width to 768px then the content formatting not looks good and has margin and padding issues. For more details, please check the attached screenshot.
Attachments (1)
Change History (3)
#1
@
2 years ago
To overcome the design break issue in Five for the Future page, please find the below CSS:
.wp-block-columns {
align-items: normal!important;
box-sizing: border-box;
display: flex;
width: 500px;
flex-wrap: wrap!important;
margin-bottom: 1.75em;
}
@media screen and (min-width: 768px)
.is-style-wporg-parallelogram .wp-block-column:first-child {
position: relative;
top: 60px;
left: 175px;
z-index: 2;
padding-right: 60px;
}
@media screen and (min-width: 768px)
.is-style-wporg-parallelogram .wp-block-column:last-child {
position: relative;
z-index: 1;
right: -35px;
padding-left: 60px;
}
#2
@
15 months ago
- Component changed from General to Five For The Future
- Priority changed from normal to lowest
- Resolution set to wontfix
- Status changed from new to closed
Thanks for the report and patch! To provide a little more detail, this only applies to the page in question at widths of 768px through 781px.
I feel as though this isn't an issue, or much of one if it is. The "break" being reported seems to be that the blue and purple parallelograms slightly overlap lengthwise and are clipped on both sides of the viewport. However, the parallelograms are merely background design elements whose sides already intentionally overlap at full width. The ends of the parallelograms being clipped off-screen affects nothing since they are just design elements. The appearance as reported could be a valid design choice, even if it wasn't. Coupled with the fact that this affects only 13px worth of viewport width makes this very unnecessary to address.
If you feel strongly about this, feel free to open an issue at the preferred location for Five for the Future site, its GitHub repository.
Design break issue in the Five for the Future page