Twenty Seventeen theme unresponsive due to broken layout

[elhardoum]

In many pages, we have unresponsive layout with a horizontal scroll bar, all due to a screen reader text label with the following CSS properties:

`
float: left;
margin: 0;
width: 70%;
`

taking more width than its parent form.

This occurs in the following pages (at least):

• members index
• groups index

A simple solution was to add position: relative to the parent form.

[elhardoum]

In src/bp-templates/bp-legacy/css/twentyseventeen.scss:2863

+ position: relative;

[DJPaul]

Can you confirm if you're using the Nouveau or Default template pack? You can find the setting in wp-admin > Settings > BuddyPress, one of the tabs.

[elhardoum]

Replying to DJPaul:

Can you confirm if you're using the Nouveau or Default template pack? You can find the setting in wp-admin > Settings > BuddyPress, one of the tabs.

Thanks Paul. I am using the default template pack (BuddyPress Legacy). Using BP Nouveau this does not occur, as this template pack does not have stylesheets for themes (e.g twentyseventeen.scss in this case).

[r-a-y]

Thanks again for your proposed fix, @elhardoum.

@hnla, can you take a look at elhardoum's SCSS change for bp-legacy to see if his approach is valid?

[djpaul]

In 12226:

Templates, Legacy: fix horizontal scrollbar on member directories on twentyseventeen

Props elhardoum

Fixes #7917

[djpaul]

In 12227:

Templates, Legacy: fix horizontal scrollbar on member directories on twentyseventeen

Props elhardoum

Fixes #7917 (3.0 branch)