Making WordPress.org

Changeset 9577


Ignore:
Timestamp:
03/09/2020 10:13:48 PM (23 months ago)
Author:
coffee2code
Message:

wp4.css: Improve responsiveness of homepage's 4-column section just above footer.

  • Don't orphan "WordPress Users" column
  • Center smaller columns as they flow into new rows, so they aren't left-justified with large right margin
  • Fill available space as columns wrap instead of maintaining fixed column widths

Props garrett-eclipse, dufresnesteven, coffee2code.
Fixes #4980.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/style/wp4.css

    r9541 r9577  
    11511151}
    11521152
     1153@media screen and (max-width:960px) {
     1154    #home-below .wrapper .col-4 {
     1155        width: calc(90% - 250px);
     1156        min-height: 260px;
     1157    }
     1158    #home-below .wrapper div:nth-child(odd) {
     1159        margin-left: 10%;
     1160    }
     1161}
     1162@media screen and (max-width:700px) {
     1163    #home-below .wrapper div:nth-child(odd) {
     1164        margin-left: 7%;
     1165    }
     1166    #home-below .wrapper .col-4 {
     1167        width: calc(100% - 250px);
     1168    }
     1169}
     1170@media screen and (max-width:544px) {
     1171    #home-below .wrapper div:nth-child(odd) {
     1172        margin-left: 4%;
     1173    }
     1174    #home-below .wrapper .col-4 {
     1175        width: calc(100% - 206px);
     1176    }
     1177}
     1178@media screen and (max-width:440px) {
     1179    #home-below .wrapper .col-2,
     1180    #home-below .wrapper .col-4 {
     1181        width: 92%;
     1182    }
     1183
     1184    #home-below .wrapper .col-2 {
     1185        text-align: center;
     1186    }
     1187
     1188    #home-below .wrapper .col-2 h4 {
     1189        text-align: left;
     1190    }
     1191
     1192    ul#notable-users li a {
     1193        margin: 0 auto;
     1194        text-align: center;
     1195    }
     1196}
     1197
    11531198.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    11541199    float: left;
Note: See TracChangeset for help on using the changeset viewer.