personalrobotics
diff --git a/‎.github/PULL_REQUEST_TEMPLATE.md
+1-1 b/‎.github/PULL_REQUEST_TEMPLATE.md
+1-1
diff --git a/‎feedingwebapp/ResponsivenessTesting.md
+32 b/‎feedingwebapp/ResponsivenessTesting.md
+32
diff --git a/‎feedingwebapp/package-lock.json
+36 b/‎feedingwebapp/package-lock.json
+36
diff --git a/‎feedingwebapp/package.json
+1 b/‎feedingwebapp/package.json
+1
@@ -13,7 +13,7 @@
 - [ ] Format React code with `npm run format`
 - [ ] Format Python code by running `python3 -m black .` in the top-level of this repository
 - [ ] Thoroughly test your code's functionality, including unintended uses.
-- [ ] Thoroughly test your code's responsiveness by rendering it on different devices, browsers, etc.
+- [ ] Fully test the responsiveness of the feature as documented in the [Responsiveness Testing Guidelines](https://github.com/personalrobotics/feeding_web_interface/blob/main/feedingwebapp/ResponsivenessTesting.md). If you deviate from those guidelines, document above why you deviated and what you did instead.
 - [ ] Consider the user flow between states that this feature introduces, consider different situations that might occur for the user, and ensure that there is no way for the user to get stuck in a loop.
 
 **Before merging a pull request**
 
@@ -0,0 +1,32 @@
+# Methodology for Testing Responsiveness 
+
+After developing an app feature, make sure to test it on the following setups. Total 4 devices as listed below.
+- **Smartphone:** iPhone 14 Plus [Tyler]; Width: 428 & Height: 926
+    - Landscape
+    - Portrait 
+- **Tablet:** iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366
+    - Landscape
+    - Portrait
+- **External Monitor:** Width: 4096 & Height: 2304
+- **Laptop:** Width: 2560 & Height: 1600
+    - Full-screen 
+    - Half-screen (vertical split)
+    - Quarter screen 
+
+For the smartphone and laptops, test on Chrome, Firefox, Edge, and Safari. For the tablet and monitor, pick one browser to test it on. 
+
+In total, you will run 23 tests (4 browsers * 1 smartphone * 2 orientations + 1 tablet * 2 orientations + 4 browsers * 3 laptops + 1 monitor). 
+
+In portrait, pages should have their content appear on one screen and not require scrolling. In landscape, scrolling may be unavoidable for some screens, but try to rearrange the content horizontally in order to minimize required scrolling. 
+
+If you don’t have the listed devices available for testing, please “Add custom device” in your browser’s responsive design mode using the width and height of the specific device’s resolution below. Please find the appropriate link from below for each browser's documentation on how to do this *except* Safari: 
+
+1. https://www.ios-resolution.com/
+2. https://support.apple.com/kb/SP748?locale=en_US
+3. Adding custom device in Chrome: https://developer.chrome.com/blog/add-a-new-custom-device-as-a-preset/
+4. Adding custom device in Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/
+5. Adding custom device in Firefox:
+https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/#creating-custom-devices
+
+
+
@@ -14,6 +14,7 @@
     "react-dom": "^18.1.0",
     "react-hook-form": "^7.43.9",
     "react-native-web": "^0.19.4",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.3.0",
     "react-script-tag": "^1.1.2",
     "react-scripts": "^5.0.1",