WordPress.org

Making WordPress.org

Opened 6 years ago

Closed 4 years ago

#461 closed task (fixed)

Make WordPress.org home and other static pages responsive

Reported by: Otto42 Owned by:
Milestone: Priority: normal
Component: General Keywords:
Cc:

Description

This is a tracking ticket for the responsive work done for the various "static" pages of WordPress.org.

Other responsive tickets:

Plugin/theme #270
Footer: #235 and #31
Support forums: #271
Header: #259 and #53

More added as needed.

Attachments (1)

b3b28d8fac349ccce097583eb0f4dd05f26ba549.zip (1.5 MB) - added by iandunn 6 years ago.

Download all attachments as: .zip

Change History (17)

#1 @Otto42
6 years ago

In [600]:

Initial mobile styling to make home page more responsive. Minor html changes were made to index-wporg page as well for this (addition of home-text div).

#2 @iandunn
6 years ago

Looks good to me. The only thing thing I'd mention is that on my Moto G, there's no padding to the left of "Ready to get started?" or to the right of "Download WordPress"; they both jut right up against the edge of the screen.

#3 @Otto42
6 years ago

@iandunn Which ones? The ones in the header, or below the home-text?

Must be just at the right width there, because those wrap for me at a certain point. Could adjust the margins a bit, make them wrap earlier.

#4 @iandunn
6 years ago

Sorry, it's the ones in the header.

#5 @iandunn
6 years ago

Attached several screenshots from Browsershot. A few of the devices have issues.

#6 @vanillalounge
6 years ago

Is this a good place to mention that the "WordPress is also available in <language name>" box is not responsive?

https://i.cloudup.com/xgU0LmN3m0-3000x3000.png

#7 @Otto42
6 years ago

Other than stuff not being centered or flowing oddly, those all look pretty much what I expected them to look like. It's an improvement over what it had before, which was a wide body with a narrowed header/footer.

Some of that stuff at the bottom could be removed at certain sizes. The swag and/or users sections, might be less useful on mobile devices.

@vanillalounge Hah. That box is one I don't see often. I'll look into it.

#8 @Otto42
6 years ago

BTW, if anybody wants to take a few minutes to give me some CSS fixes for /mobile, I'd appreciate it. That's just embarrassing. :-)

#9 @nphaskins
6 years ago

@media (max-width: 480px) {
	#home-welcome img.screenshot {
		float:none;
		margin-right:0;
	}

	#home-below .wrapper {
		float:none;
		max-width:100%;
	}

	#home-welcome p {
		margin-right:0;
	}

	#home-text {
		float:none;
		margin:0;
		padding-left:15px;
		padding-right:15px;
		-webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
                box-sizing:border-box;
	}

	// not real sure if you want to do this one but tey should really be reset on mobile
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
		float:none;
		margin:0;
		width: 100% !important; // this is bad practice should really use specificity
		padding-left:15px;
		padding-right:15px;
		-webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
                box-sizing:border-box;
	}

	#notable-users {
		li {
			width:50%;
			display:inline-block;
		}
	}
}

This cleans up more of the home page. I've got a lot more fixes coming in for the other static pages, will be submitting those over the next couple of days.

#10 @Otto42
6 years ago

#462 was marked as a duplicate.

#11 @nphaskins
6 years ago

Here are some CSS fixes for wordpress.org/mobile

       // not sure if you want to jack with this but should really be reset on mobile
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
		float:none;
		width:100%;
		margin:0;
		padding-left:15px;
		padding-right:15px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	#books li {
		padding:15px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	#books .image {
		float: none;
		margin: 0 auto;
		border-right: none;
	}
	#books h3{
		overflow:hidden;
	}

This ticket was mentioned in IRC in #wordpress-meta by Otto42. View the logs.


6 years ago

This ticket was mentioned in IRC in #wordpress-meta by sams. View the logs.


6 years ago

#14 @CoachBirgit
5 years ago

  • Cc coachbirgit@… added

for the sake of completeness: #526 Mobile view on international sites -> download button inconsistent

Key question: it is necessary, to have a download button on mobile view at smartphones?

This ticket was mentioned in Slack in #meta by ocean90. View the logs.


4 years ago

#16 @samuelsidler
4 years ago

  • Resolution set to fixed
  • Status changed from new to closed

This is fixed (enough). If you find specific pages that aren't responsive, please file a new ticket for each one so we can investigate.

Note: See TracTickets for help on using tickets.