WordPress.org

Make WordPress Core

Ticket #17564: 17564.responsive-gallery-shortcode.diff

File 17564.responsive-gallery-shortcode.diff, 1.7 KB (added by mfields, 7 years ago)

Allow gallery shortcode to respond up to 9 columns.

  • wp-content/themes/twentyeleven/style.css

     
    14951495    display: block;
    14961496    margin: 0 auto 1.625em;
    14971497}
     1498.gallery-columns-4 .gallery-item {
     1499        width:23% !important;
     1500        padding-right:2% !important;
     1501}
     1502.gallery-columns-5 .gallery-item {
     1503        width:18% !important;
     1504        padding-right:2% !important;
     1505}
     1506.gallery-columns-6 .gallery-item {
     1507        width:14% !important;
     1508        padding-right:2% !important;
     1509}
     1510.gallery-columns-7 .gallery-item {
     1511        width:12% !important;
     1512        padding-right:2% !important;
     1513}
     1514.gallery-columns-8 .gallery-item {
     1515        width:10% !important;
     1516        padding-right:2% !important;
     1517}
     1518.gallery-columns-9 .gallery-item {
     1519        width:9% !important;
     1520        padding-right:2% !important;
     1521}
     1522.gallery-columns-4 .gallery-item img,
     1523.gallery-columns-5 .gallery-item img,
     1524.gallery-columns-6 .gallery-item img,
     1525.gallery-columns-7 .gallery-item img,
     1526.gallery-columns-8 .gallery-item img,
     1527.gallery-columns-9 .gallery-item img {
     1528        width:100% !important;
     1529        height:auto !important;
     1530}
    14981531
    14991532
    15001533/* =Navigation
     
    21852218                position: absolute;
    21862219                top: 2.2em;
    21872220        }
     2221        .gallery-columns-3 .gallery-item {
     2222                width:31% !important;
     2223                padding-right:2% !important;
     2224        }
     2225        .gallery-columns-3 .gallery-item img {
     2226                width:100% !important;
     2227                height:auto !important;
     2228        }
    21882229}
     2230@media (max-width: 450px) {
     2231        .gallery-columns-2 .gallery-item {
     2232                width:45% !important;
     2233                padding-right:4% !important;
     2234        }
     2235        .gallery-columns-2 .gallery-item img {
     2236                width:100% !important;
     2237                height:auto !important;
     2238        }
     2239}
    21892240@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    21902241        body {
    21912242                padding: 0 .5em;