Making WordPress.org

Opened 15 months ago

Closed 5 months ago

#6743 closed defect (bug) (wontfix)

Design break issue in the Five for the Future page

Reported by: patelhitesh's profile patelhitesh 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)

CleanShot 2023-02-08 at 15.27.20@2x.png (136.8 KB) - added by patelhitesh 15 months ago.
Design break issue in the Five for the Future page

Download all attachments as: .zip

Change History (3)

@patelhitesh
15 months ago

Design break issue in the Five for the Future page

#1 @patelhitesh
15 months 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 @coffee2code
5 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.

Note: See TracTickets for help on using tickets.