This part of the question is about the admin application.

Some members of the admin team are interested in the possibility of carrying out some admin tasks using a mobile device; for example, while they are out attending an event. They would like to see how the admin application might be presented on a mobile device.

Your task is to make a copy of your solution to $2($a$)$ and amend the CSS and HTML as appropriate to present the same form on a smartphone$-$sized screen.

Use techniques you have learned in Block $3$ to allow the page layout to respond to screen width, such that the page and form are also usable on a mobile device screen $(375$px wide, portrait orientation, e$.$g$.667$px high$).$ Both the form and the page navigation should be responsive.

No changes to functionality are required, but you may consider HTML$5$ inputs even if you did not use these in your $2($a$)$ solution.

The page and form should continue to be accessible $($consider any accessibility decisions you made in $2($a$)).$

Take care not to change your original $2($a$)$ solution files.

The web page and any related files should be clearly named e$.$g$.$q$2$b$.$html$,$q$2$b$.$css$.$

Your $2($b$)$ solution should work for two combinations of device and orientation: a mobile device in portrait orientation and a laptop device in landscape orientation. Therefore, your solution should work at two screen widths: $375$px and $1024$px $($Mobile M$$ and $$Laptop$$ in Chrome$$s Device Toolbar, as described in Block $3$ Part $1$ Activity $5).$ Your solution is not required to respond appropriately to widths less than, between, or greater than these two values.

Hint: as you saw in Block $3$ Part $3,$ page layout on mobile device screens is typically a single column, with the most useful or commonly used content or functionality presented sooner. For forms, labels are often presented above inputs rather than to their left. In addition to examples provided in Block $3,$ the file $$emaMobileResources$.$zip$$ provides a further example of some HTML and CSS which you can adapt if you wish.

Validate your HTML using the W$3$C Markup Validation Service. You should also validate your CSS$,$ but you are not required to provide evidence of this.

In your document, for your marker, provide a screenshot of the part of the page that shows the line $$Document checking completed$$ and the tags within the tag of your source code just below.

Collect the files that make up your $2($a$)$ and $2($b$)$ solutions into a single folder, retaining any folder structure that you may have created. Please name the folder using your own OUCU $($namely $$OUCU$\_$Q$2)$ and record the folder name for your marker in your document. Record the filename of your $2($b$)$ HTML file so that your marker can open and test it$.$ Note that your $2($a$)$ and $2($b$)$ solutions must work independently of each other.