Making WordPress.org

Opened 4 months ago

Last modified 4 months ago

#6743 new defect (bug)

Design break issue in the Five for the Future page

Reported by: patelhitesh's profile patelhitesh Owned by:
Milestone: Priority: normal
Component: General 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 4 months ago.
Design break issue in the Five for the Future page

Download all attachments as: .zip

Change History (2)

@patelhitesh
4 months ago

Design break issue in the Five for the Future page

#1 @patelhitesh
4 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;

}

Note: See TracTickets for help on using tickets.