Extra margins added by EMBL-EBI dropdown

[gpmaccari]

The EMBL-EBI dropdown menu adds extra margins in screens < 53em, causing the page not to be properly responsive.

.embl-selector .button[aria-expanded="false"]::after that adds some extra margin to allow the location name (Hinxton in this case) to be correctly visualized. When the screen width is < 53em, the location name is not displayed, but the ::after element still adds extra right margins.

[gpmaccari]

This is the same issue as #63

[khawkins98]

I've just committed a fix for v1.2 -- it should show shortly on the dev server: https://wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-global.css

Here it is on the boilerplate page: https://wwwdev.ebi.ac.uk/style-lab/websites/sample-site/boilerplate/blank.html

Hopefully in v1.3 the approach will be a bit more refined.

[gpmaccari]

The display: nonein the .embl-selector .button:after element doesn't seems to override the original display: block style.

Changing the code to

@media screen and (max-width: 53em){
  .embl-selector .button[aria-expanded="false"]::after{ 
     display:none; 
  }
}

seems to work.

[khawkins98]

Supporting this method (which requires Foundation JS) was proving difficult and problematic, so in v1.3 we moved to a more "simple" and cleaner approach.

This should now be resolved; example: https://www.ebi.ac.uk/style-lab/websites/sample-site/boilerplate/blank.html

Closing this issue, but please shout if issues persist -- or if there are other concerns.