Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix radio button appearance on small screens #14624

Merged
merged 1 commit into from
Mar 26, 2019

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr commented Mar 25, 2019

Radio buttons and checkboxes currently appear 25px wide on mobile screens, and 16px wide on larger screens.

In the case of the radio button, the :before pseudo element that forms the circle inside of it does not have mobile styles, leading to an off-centered placement:

Screen Shot 2019-03-25 at 2 56 44 PM

This PR adds styles to correct that, mirroring what we do for checkboxes already:

Screen Shot 2019-03-25 at 2 51 59 PM


To test:

  1. Use a screen under 782px wide.
  2. Open the post visibility section of the sidebar.
  3. Verify that the radio button is appearing correctly.

@kjellr kjellr added [Type] Bug An existing feature does not function as intended General Interface Parts of the UI which don't fall neatly under other labels. labels Mar 25, 2019
@kjellr kjellr self-assigned this Mar 25, 2019
@kjellr kjellr added the Needs Design Feedback Needs general design feedback. label Mar 25, 2019
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍😍

@kjellr kjellr merged commit c36069a into master Mar 26, 2019
@kjellr kjellr deleted the fix/radio-button-mobile-styles branch March 26, 2019 12:01
@jasmussen
Copy link
Contributor

I'm not entirely sure why I'm seeing this, but in master I'm currently seeing this:

Screenshot 2019-03-28 at 09 58 02

That's fullscreen, not sure if that matters.

kjellr added a commit that referenced this pull request Mar 28, 2019
PR #14624 mistakenly used negative pixel values for the position of the dot inside of radio buttons. This PR restores the correct values, to ensure proper placement.
@kjellr
Copy link
Contributor Author

kjellr commented Mar 28, 2019

Good catch, @jasmussen! For some reason, I used negative margins here instead of positive ones. 😅

The fix is over in #14684.

kjellr added a commit that referenced this pull request Mar 28, 2019
PR #14624 mistakenly used negative pixel values for the position of the dot inside of radio buttons. This PR restores the correct values, to ensure proper placement.
@youknowriad youknowriad added this to the 5.4 (Gutenberg) milestone Mar 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants