github-issues (html and scss files) updated to resolve visual issues.

[abenipa3]

• Updated github-issues-guide.scss and github-issues.html to resolve visual issues.
• Updated the card to reflect live status.

Fixes #794

UPDATE 4:04 PM 1/11/21: I've just identified a new visual issue after reviewing it in iPad mode. Will update once it's resolved. Thanks.

[abenipa3]

Fixes #794

• Visual issue resolved. Ready for review.

[drubgrubby]

@alyssabenipayo - Good work on getting the flags to be more stable. Hopefully at a developers' meeting you can explain your solution.

Unfortunately, it seems that while the iPad version is now fixed, on the iPhone version the flags are now pushed over the top of the things they are flagging.

On the current version that's live on the site the mobile version seems okay.

Perhaps you can play with the css media query (or something) to make it so both the tablet and mobile versions track correctly.

[abenipa3]

@drubgrubby - Thank you for your feedback.

I might be late in attending tonight's meeting -- going to help my parents out tonight and not sure when I'll be back.

In the meantime, here's a brief explanation of the solution:

• The @ mixins for the guide arrows in _guide-pages.scss are reusable, which makes it easier to resolve the visual issue as long as we call the correct class.
• In this case, the class "overlay-links-img" is the class we used so that the arrows will connect with the image.
  
• Initially, we had "screenshot" as the class, which did not work.
  

I'll be more than happy to elaborate either tonight's meeting or on Sunday. Will continue to experiment with the media query.

Thanks.

[abenipa3]

Redesigning guide pages. #1085