Skip to:
Content

BuddyPress.org

Changeset 11811


Ignore:
Timestamp:
01/18/2018 02:11:24 PM (7 years ago)
Author:
hnla
Message:

Nouveau: Grid layout styles

Add max width to list-wrap for .grid.two layout li items - in fluid layouts without max-width page constraint, two item row boxes can become overly large, avatars pixalate. For large-up media query constrain boxes widths & centre in their li element.

Location:
trunk/src/bp-templates/bp-nouveau
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-templates/bp-nouveau/common-styles/_bp_layouts.scss

    r11686 r11811  
    146146            > li {
    147147                padding-bottom: 20px;
     148
     149                // With two to a row large screens could allow
     150                // unchecked fluid widths resulting in overlarge avatars.
     151                // This ruleset adds a max width to inner element where
     152                // max page widths aren't set.
     153                @include large-up() {
     154
     155                    .list-wrap {
     156                        max-width: 500px;
     157                        margin: 0 auto;
     158                    }
     159                }
    148160            }
    149161        }
  • trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css

    r11775 r11811  
    47184718        padding-bottom: 20px;
    47194719    }
     4720}
     4721
     4722@media screen and (min-width: 24em) and (min-width: 75em) {
     4723    .grid.two > li .list-wrap {
     4724        max-width: 500px;
     4725        margin: 0 auto;
     4726    }
     4727}
     4728
     4729@media screen and (min-width: 24em) {
    47204730    .grid.two > li, .grid.three > li {
    47214731        width: 50%;
  • trunk/src/bp-templates/bp-nouveau/css/buddypress.css

    r11775 r11811  
    47184718        padding-bottom: 20px;
    47194719    }
     4720}
     4721
     4722@media screen and (min-width: 24em) and (min-width: 75em) {
     4723    .grid.two > li .list-wrap {
     4724        max-width: 500px;
     4725        margin: 0 auto;
     4726    }
     4727}
     4728
     4729@media screen and (min-width: 24em) {
    47204730    .grid.two > li, .grid.three > li {
    47214731        width: 50%;
Note: See TracChangeset for help on using the changeset viewer.