FLOE-534: Responsive UIO display:block conflicts with a11y theme display:flex

Metadata

Source
FLOE-534
Type
Task
Priority
Major
Status
Open
Resolution
N/A
Assignee
N/A
Reporter
Eloisa Guerrero
Created
2018-01-29T13:35:31.313-0500
Updated
2018-01-29T14:17:39.830-0500
Versions
N/A
Fixed Versions
N/A
Component
  1. UIO WordPress plugin

Description

Flexbox assigns class row to display: flex, but this conflicts with the UIO wordpress plugin which is displayed as block. This causes UIO to appear side-by-side the a11y row and makes them look like they are two columns in one row.

Comments

  • Eloisa Guerrero commented 2018-01-29T13:44:02.751-0500

    In UIO's SeparatedPanelPrefsEditor.css see the section where wideScreen is display: block:

    @media screen and (min-width: 40em) {
  .fl-prefsEditor-separatedPanel {
    display: block;
  }
  .fl-prefsEditor-separatedPanel .fl-panelBar {
    box-shadow: none;
    font-size: 1rem;
  }
  .fl-prefsEditor-separatedPanel .fl-panelBar.fl-panelBar-smallScreen {
    display: none;
  }
  .fl-prefsEditor-separatedPanel .fl-panelBar.fl-panelBar-wideScreen {
    display: block;
  }

    Whereas in the a11y theme's foundation-flex.css display is flex:

    .row {
 max-width:75rem;
 margin-right:auto;
 margin-left:auto;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -ms-flex-flow:row wrap;
 flex-flow:row wrap
}