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: |
|
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)
Change History (2)
#1
@
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;
}
Design break issue in the Five for the Future page