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

Width issue on mobile (Search page) #30

Open
DeniseColbert opened this issue Nov 28, 2018 · 6 comments
Open

Width issue on mobile (Search page) #30

DeniseColbert opened this issue Nov 28, 2018 · 6 comments
Labels

Comments

@DeniseColbert
Copy link
Collaborator

Screenshot_20180810-115529.png

@ghost
Copy link

ghost commented Nov 28, 2018

@DeniseColbert For future reference, the following process will help to ensure we define and correct issues of this variety:

  1. Open Google Chrome
  2. Navigate to the page where the issue appears
  3. Press Ctrl+Shift+i to open Chrome Developer Tools
  4. Confirm that device emulation is toggled (it's the second icon from the left at the top of the debug console tray that looks like a phone over a rectangle and it should be blue to indicate device emulation is active)
  5. Use the dropdown menu or the gray bars at the top of the page panel to set the viewport width
  6. Go to the Menu icon (three dots) in the upper right-hand corner of the page panel and select Capture screenshot or Capture full size screenshot
  7. Attach the image with a concise description of the issue

(In this case I can see that the Search button is truncated but it was not immediately apparent what the issue was from the title)

@DeniseColbert
Copy link
Collaborator Author

Did that, but can't see where Capture screenshot is:
image

(I guess screenshots through the DevTool are more helpful as you get some code info from it, but is the issue here that I didn't put enough description in the title?)

@ghost
Copy link

ghost commented Nov 29, 2018

@DeniseColbert Ah my bad - forgot that the default dev panel layout puts the dev panel's options at the upper right-hand corner - try the three dots at the upper right-hand corner of the page display panel (next to the responsive/mobile emulation dropdown).

I guess screenshots through the DevTool are more helpful as you get some code info from it, but is the issue here that I didn't put enough description in the title?

Aye, basically I need to know what was expected and what happened instead of what was expected - if you can refer to the specific element I need to look at w/a screenshot, that's typically enough to put together a fix (but a description like "something is wrong" accompanying a screenshot means I have to hunt for that "something" and/or ask for clarification - otherwise I may end up working on something other than the intended bug).

@DeniseColbert
Copy link
Collaborator Author

Found the capture menu; thanks.

Right, that makes sense, I'll try to make sure I am more descriptive of the issue. So in this instance, would "Search button truncated on Search page on mobile" be sufficient, with a screen grab?

@ghost
Copy link

ghost commented Nov 29, 2018

@DeniseColbert

So in this instance, would "Search button truncated on Search page on mobile" be sufficient, with a screen grab?

Yes, that description would leave no room for confusion on my part and the screenshot would allow me to quickly replicate the issue - bonus points if you include the viewport width (as this behavior can and will vary between widths with CSS media queries) e.g. "https://freeukgenealogy.org.uk/search - Search button truncated at 320px viewport width" + the screenshot provided would be the ideal description so far as I'm concerned.

@DeniseColbert
Copy link
Collaborator Author

Ok to remove gutter

@ghost ghost added the CSS label Mar 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant