Opened 11 years ago
Closed 9 years ago
#461 closed task (blessed) (fixed)
Make WordPress.org home and other static pages responsive
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Component: | General | Keywords: | |
Cc: |
Attachments (1)
Change History (17)
#2
@
11 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
@
11 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.
#7
@
11 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
@
11 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
@
11 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.
#11
@
11 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.
11 years ago
This ticket was mentioned in IRC in #wordpress-meta by sams. View the logs.
11 years ago
#14
@
11 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?
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).