WordPress.org

Making WordPress.org

Opened 6 years ago

Closed 4 years ago

#235 closed enhancement (fixed)

Make WordPress.org Footer Responsive

Reported by: samuelsidler Owned by: ocean90
Milestone: Priority: normal
Component: General Keywords: needs-ui
Cc:

Description

Similar to #53, we need to make the footer of dotorg responsive.

Attachments (5)

wp4footer.diff (22.2 KB) - added by cyberchimps 6 years ago.
Footer responsive styling
wp4footer.2.diff (22.7 KB) - added by cyberchimps 6 years ago.
Recoded so that we don't need to use classes in html
css.diff (125 bytes) - added by g_liu 5 years ago.
Diff file to fix footer.
235.patch (736 bytes) - added by ocean90 4 years ago.
235.2.patch (1.1 KB) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (14)

@cyberchimps
6 years ago

Footer responsive styling

#1 @cyberchimps
6 years ago

I have added the css to help make the footer responsive.

There are some classes that will need to be added to the html.

In #wp-org-footer . wrapper each of the ul tags will need the classes small4 and med2 applied to them. Of course you can just pick better naming conventions that work with whatever you're doing now.

at mobile width and up to tablet they display as 3 columns 2 rows and above 768px they display as they always have done.

The only issue that I have noticed is that on very small screens the Twitter badge breaks out of its container.

#2 @Otto42
6 years ago

  • Cc Otto42 added

@cyberchimps
6 years ago

Recoded so that we don't need to use classes in html

#3 @cyberchimps
6 years ago

Just re-wrote the styles so that at very small screens the footer ul tags break into 2 columns so that the twitter button doesn't break out of it's container.
Also removed the need of adding classes to the HTML

#4 @nacin
6 years ago

In 185:

Make the new footer tolerable on narrow screens, as a stopgap. see #235.

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


5 years ago

@g_liu
5 years ago

Diff file to fix footer.

#6 @webvisuals
5 years ago

An enhancement to G_Liu solution so that the footer aligns center and is more balanced over the "Code is Poetry" graphic is to add text-align:center; to the wrapper and text-align:left; to the UL

Something akin to this.

#wporg-footer .wrapper {

max-width: 952px;
text-align:center;

}

#wporg-footer ul {

float:none;
display: inline-block;
vertical-align: top;
text-align:left;

}

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


4 years ago

#8 @ocean90
4 years ago

  • Owner set to ocean90
  • Status changed from new to reviewing

@ocean90
4 years ago

@ocean90
4 years ago

#9 @ocean90
4 years ago

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

In 2368:

wp4.css: Improve responsiveness of WordPress.org footer.

Fixes #235.

Note: See TracTickets for help on using tickets.