WordPress.org

Make WordPress Core

Changeset 42181


Ignore:
Timestamp:
11/14/2017 11:01:55 PM (3 years ago)
Author:
westonruter
Message:

About Page: Fix issue with overlapping images and text on IE11 and Edge 15.

Props Clorith, ryelle, afercia, la-geek, SergeyBiryukov.
See #42514.
Fixes #42545.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r42173 r42181  
    254254                    $sections.each( function( i, section ) {
    255255                        var $section = $( section );
    256                         // Set width on header to prevent column jump
    257                         var $header = $section.find('.section-header');
    258                         $header.css( {
    259                             width: $header.innerWidth() + 'px'
    260                         } );
    261 
    262256                        // If the title is long, switch the layout
    263257                        var $title = $section.find( 'h2' );
  • trunk/src/wp-admin/css/about.css

    r42173 r42181  
    261261.about-wrap .two-col-text {
    262262    -webkit-column-count: 2;
     263    -moz-column-count: 2;
    263264    column-count: 2;
    264265    -webkit-column-gap: 40px;
     266    -moz-column-gap: 40px;
    265267    column-gap: 40px;
    266268}
     
    369371    grid-column: 1;
    370372    position: relative;
     373    min-width: 230px;
     374    max-width: 300px;
    371375}
    372376
     
    374378    margin: 0;
    375379    text-align: left;
     380    position: absolute;
    376381}
    377382
    378383.about-wrap .floating-header-section .section-content {
    379     display: -ms-grid;
    380     display: grid;
    381     grid-gap: 60px;
    382     -ms-grid-columns: 5fr 5fr;
    383     grid-template-columns: 5fr 5fr;
    384384    -ms-grid-column: 2;
    385385    grid-column: 2;
    386 }
    387 
    388 .about-wrap .floating-header-section .section-item:nth-of-type(odd) {
    389     -ms-grid-column: 1;
    390     grid-column: 1;
    391 }
    392 
    393 .about-wrap .floating-header-section .section-item:nth-of-type(even) {
    394     -ms-grid-column: 2;
    395     grid-column: 2;
     386    display: -webkit-box;
     387    display: flex;
     388    -webkit-box-pack: justify;
     389    justify-content: space-between;
     390    -webkit-box-align: start;
     391    align-items: flex-start;
     392    -webkit-box-orient: horizontal;
     393    -webkit-box-direction: normal;
     394    flex-flow: row wrap;
     395    -webkit-box-flex: 2;
     396    flex-grow: 2;
     397    flex-shrink: 0;
     398}
     399
     400.about-wrap .floating-header-section .section-item {
     401    -webkit-box-flex: 1;
     402    flex-grow: 1;
     403    max-width: calc(50% - 30px);
     404}
     405
     406.about-wrap .floating-header-section .section-item:nth-child(1),
     407.about-wrap .floating-header-section .section-item:nth-child(2) {
     408    margin-bottom: 60px;
     409}
     410
     411.about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2),
     412.about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) {
     413    margin-bottom: 0;
    396414}
    397415
    398416.about-wrap .floating-header-section.has-long-title {
    399     -ms-grid-columns: 1fr;
    400     grid-template-columns: 1fr;
    401     grid-gap: 60px 0;
     417    display: block;
     418}
     419
     420.about-wrap .floating-header-section.has-long-title .section-header {
     421    max-width: 100%;
     422}
     423
     424.about-wrap .floating-header-section.has-long-title h2 {
     425    position: static;
     426    margin-bottom: 60px;
    402427}
    403428
    404429.about-wrap .floating-header-section.has-long-title .section-content {
    405     -ms-grid-columns: minmax(max-content, 300px) minmax(max-content, 300px);
    406     grid-template-columns: minmax(max-content, 300px) minmax(max-content, 300px);
     430    -webkit-box-pack: start;
     431    justify-content: flex-start;
    407432}
    408433
    409434.about-wrap .floating-header-section.has-long-title .section-item {
    410435    max-width: 300px;
    411 }
    412 
    413 .about-wrap .floating-header-section.has-long-title .section-header,
    414 .about-wrap .floating-header-section.has-long-title .section-content {
    415     -ms-grid-column: 1;
    416     grid-column: 1;
     436    margin-bottom: 0;
     437}
     438
     439.about-wrap .floating-header-section.has-long-title .section-item + .section-item {
     440    margin-left: 60px;
    417441}
    418442
     
    508532------------------------------------------------------------------------------*/
    509533
    510 @media screen and ( max-width: 782px ) {
     534@media screen and (max-width: 1250px) {
     535    .about-wrap .floating-header-section.has-long-title .section-item:nth-child(1),
     536    .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2) {
     537        margin: 0 0 60px;
     538    }
     539
     540    .about-wrap .floating-header-section.has-long-title .section-item:nth-child(3),
     541    .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
     542        margin: 0;
     543    }
     544
     545    .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2),
     546    .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
     547        margin-left: 60px;
     548    }
     549}
     550
     551@media screen and (max-width: 782px) {
    511552    .about-wrap .two-col-text {
    512553        -webkit-column-count: 1;
     554        -moz-column-count: 1;
    513555        column-count: 1;
    514556    }
     
    525567
    526568    .about-wrap .floating-header-section {
    527         -ms-grid-columns: 1fr;
    528         grid-template-columns: 1fr;
    529         grid-gap: 60px 0;
     569        display: block;
    530570    }
    531571
    532572    .about-wrap .floating-header-section .section-header,
    533573    .about-wrap .floating-header-section .section-content {
    534         -ms-grid-column: 1;
    535         grid-column: 1;
     574        max-width: 100%;
     575    }
     576
     577    .about-wrap .floating-header-section h2 {
     578        position: static;
     579        margin-bottom: 60px;
    536580    }
    537581}
     
    596640    }
    597641
    598     .about-wrap .floating-header-section .section-content {
    599         -ms-grid-columns: 1fr;
    600         grid-template-columns: 1fr;
    601         grid-gap: 60px 0;
    602     }
    603 
    604642    .about-wrap .floating-header-section .section-content .section-item {
    605         -ms-grid-column: 1;
    606         grid-column: 1;
    607643        max-width: 100%;
    608     }
    609 }
     644        margin: 0 0 60px;
     645    }
     646}
Note: See TracChangeset for help on using the changeset viewer.