Skip to content

Made the webpage responsive.#6

Open
martinfrances107 wants to merge 1 commit intophy1um:mainfrom
martinfrances107:grid-template
Open

Made the webpage responsive.#6
martinfrances107 wants to merge 1 commit intophy1um:mainfrom
martinfrances107:grid-template

Conversation

@martinfrances107
Copy link
Copy Markdown

Hi I love this little project ...

While I was playing with the emulation. I noticed the web-page was not responsive - so I fixed it.

( For narrow pages the section "Loaded Program Offset" was misaligned.)

I hope this PR helps.

To check my work I ran the page through the lighthouse test suite which picks up HTML issues.

https://developer.chrome.com/docs/lighthouse/overview

In turn I also fixed any reported issues.

  1. I added this meta tags

https://developer.chrome.com/docs/lighthouse/best-practices/viewport

  1. All form elements must have a label ... for the text area I added this snippet.

Program View

Hi I love this little project ...

While I was playing with the emulation. I noticed the web-page
was not responsive - so I fixed it.

( The section "Loaded Program Offset" was misaligned.)

I hope this PR helps.

To check my work I ran the page through the lighthouse test suite
which picks up HTML issues.

https://developer.chrome.com/docs/lighthouse/overview

In turn I also fixed any reported issues.

1) I added this meta tags

<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.chrome.com/docs/lighthouse/best-practices/viewport

2) All form elements must have a label ... for the text area I added this
snippet.

<label for="code-input">Program View</label>
Copy link
Copy Markdown

@NithinKonda NithinKonda left a comment

Choose a reason for hiding this comment

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

The pull request aims to make the help.html webpage responsive and fixes HTML issues identified by the Lighthouse test suite. The key changes include:

Adding meta tags for viewport and description.
Improving the HTML structure for better readability and maintainability.
Positive Aspects:

The addition of the tag ensures that the webpage is responsive and adjusts to different screen sizes.
Including a tag improves SEO and provides better context for the page.
The HTML structure is cleaned up, making it more readable and maintainable.
Suggestions for Improvement:

Ensure that all changes are consistently formatted (e.g., indentation).
Verify that the changes do not affect the existing functionality of the help page, especially on narrow screens.

@martinfrances107
Copy link
Copy Markdown
Author

regarding the imprefections on the help page ... loooking at the
The page has lots of <pre> tags where text layout can be force by a human.

Changing the CSS styling from the default overflow breaks the intent of the pre tag....

I started this PR just to help out and get rid of the blemish on the front page...

so I suggest that gets diverted to a separate issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants