Skip to content

Fix Admin Bar positioning on mobile viewport#3440

Merged
westonruter merged 1 commit intodevelopfrom
fix/mobile-admin-bar
Oct 3, 2019
Merged

Fix Admin Bar positioning on mobile viewport#3440
westonruter merged 1 commit intodevelopfrom
fix/mobile-admin-bar

Conversation

@westonruter
Copy link
Copy Markdown
Member

Summary

This override AMP's CSS:

html.i-amphtml-fie:not(.i-amphtml-inabox)>body,
html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body {
    position: relative!important;
}

By forcing the position to be unset, thus allowing the Admin Bar's position:absolute to be positioned outside of the body. AMP's CSS here is only relevant in the AMP viewer context, in which an AMP page with the Admin Bar in Dev Mode will never appear.

FIxes #3436.

Checklist

  • My pull request is addressing an open issue (please create one otherwise).
  • My code is tested and passes existing tests.
  • My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

@westonruter westonruter added this to the v1.3.1 milestone Oct 3, 2019
@westonruter westonruter requested a review from kienstra October 3, 2019 21:44
@googlebot googlebot added the cla: yes Signed the Google CLA label Oct 3, 2019
@kienstra
Copy link
Copy Markdown
Contributor

kienstra commented Oct 3, 2019

Approved

Hi @westonruter,
This looks good. As expected, the body position is unset in Dev Mode, and not unset otherwise.

In Dev Mode

body-position

Not In Dev Mode

body-position-relative

@westonruter westonruter merged commit 1f0fabc into develop Oct 3, 2019
@westonruter westonruter deleted the fix/mobile-admin-bar branch October 3, 2019 23:49
@swissspidy swissspidy modified the milestones: v1.3.1, v1.4 Oct 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cla: yes Signed the Google CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Gap at top of page for Admin Bar on mobile viewport (max-width:600px)

4 participants