WordPress.org

Making WordPress.org

Opened 7 weeks ago

Last modified 6 weeks ago

#5286 assigned defect

Found Responsive issue on about page

Reported by: jatindevani Owned by:
Milestone: Priority: normal
Component: WordPress.org Site Keywords: needs-design has-patch
Cc:

Description

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;
}

Attachments (1)

2020-06-23_20h09_24.mp4 (425.7 KB) - added by jatindevani 7 weeks ago.

Download all attachments as: .zip

Change History (12)

#1 @joyously
7 weeks ago

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

#2 follow-up: @dufresnesteven
7 weeks ago

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.

#3 in reply to: ↑ 2 ; follow-up: @rkradadiya
7 weeks ago

@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.

#4 in reply to: ↑ 3 @dufresnesteven
7 weeks ago

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.

#6 in reply to: ↑ 5 @dd32
7 weeks ago

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.

This ticket was mentioned in PR #13 on WordPress/wordpress.org by rkradadiya.


7 weeks ago

  • Keywords has-patch added; needs-patch removed

Responsive Media query CSS add to about page

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

#8 @rkradadiya
7 weeks ago

Responsive Media query CSS add to about page

Props: @jatindevani @dufresnesteven @rkradadiya

#9 @Otto42
7 weeks ago

  • Owner Otto42 deleted

#10 @dufresnesteven
6 weeks ago

@rkradadiya Thanks for the patch!

This ticket was mentioned in Slack in #design by rkradadiya. View the logs.


6 weeks ago

Note: See TracTickets for help on using tickets.