Make WordPress.org Footer Responsive

[samuelsidler]

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

[cyberchimps]

Footer responsive styling

[cyberchimps]

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.

[cyberchimps]

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

[cyberchimps]

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

[nacin]

In 185:

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

[g_liu]

Diff file to fix footer.

[webvisuals]

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;

}

[ocean90]

In 2368:

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

Fixes #235.