Found Responsive issue on about page

[jatindevani]

I found the Horizontal Scroll Issue in below page.

Page URL :: ​https://wordpress.org/about/

In one of the class padding is writter twice. => ​https://prnt.sc/t51db0

Possible solution is created based on inspect element ::

.parallelogram {
    color: #fff;
    display: block;
    margin: 0 auto;
    opacity: .9;
    padding: 75.2px 0;
    padding: 4.7rem 0;
    position: absolute;
    text-align: center;
    -webkit-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);
}

.parallelogram p {
	-webkit-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);	
}

.parallelogram>*{
	-webkit-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);		
}

body.page-about .shapes .parallelogram.technology{
	-webkit-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);	
}

.parallelogram:before{
	-webkit-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);	
    width: 20px;	
}

body.page-about .shapes .parallelogram.community{
	margin-top:20px;
}

[joyously]

Isn't that a fallback for browsers that don't support rem units?

[dufresnesteven]

Hey @jatindevani! Thanks for filing this issue.

As @joyously mentions, the "double" padding is a fallback for Internet Explorer <= 8.

In terms of the scroll, we can probably fix this by setting an overflow-x: hidden on the parallelogram container for smaller viewports.

[rkradadiya]

@dufresnesteven

overflow-x: hidden

This is not a good solution for the design.
Please check Five for the Future page for a relevant design solution.
URL - ​https://wordpress.org/five-for-the-future/

Thanks.

[dufresnesteven]

Sure. I'm not a big fan of the overlap on that page but I'm pretty indifferent overall.

Feel free to upload a patch!

Replying to rkradadiya:

@dufresnesteven

overflow-x: hidden

This is not a good solution for the design.
Please check Five for the Future page for a relevant design solution.
URL - ​https://wordpress.org/five-for-the-future/

Thanks.

[rkradadiya]

I have Commits on Github

​https://github.com/rkradadiya/wordpress.org/commit/f0b23ffc8f3f82fb072b7d03e79926ee4d8387f3

[dd32]

Replying to rkradadiya:

I have Commits on Github

​https://github.com/rkradadiya/wordpress.org/commit/f0b23ffc8f3f82fb072b7d03e79926ee4d8387f3

Thanks! Feel free to open a pull request against WordPress/wordpress.org, just mention https://meta.trac.wordpress.org/ticket/5286 in the PR description to link it to this ticket.

Just a note, your commits there are mixing spaces and tabs, we prefer tabs for indentation.

Responsive Media query CSS add to about page

Ticket: https://meta.trac.wordpress.org/ticket/5286

[rkradadiya]

Responsive Media query CSS add to about page

Props: @jatindevani @dufresnesteven @rkradadiya

[dufresnesteven]

@rkradadiya Thanks for the patch!

[dufresnesteven]

#5386 was marked as a duplicate.

[Otto42]

#5400 was marked as a duplicate.

[ryelle]

In 10441:

WordPress.org Theme: Fix responsive styling of parallelograms.

The horizontal overflow of the edges causes a horizontal scroll on touchscreens. Moving overflow-x: hidden to .site-main fixes the scroll at all screen sizes while keeping the design aesthetics.

Fixes #5286.

This ticket was fixed with a different approach, but thanks for working on this patch.

To make the about page responsive, add media query CSS.